scarlettgamestudio / scarlett-editor

Scarlett Editor repository

README

What is this repository for?

This repository contains the Scarlett Editor Module and associated libraries. At the moment this software is in Development Stage and not ready for production use.

Which Operative Systems are compatible?

The Scarlett Editor can run in all common Operative Systems including Windows, MacOS and Linux.

Runtime Setup

• Install NodeJS (8.x is recommended)
• Open a terminal in the project root folder and execute $ npm install for dependency resolution
• Link Scarlett Framework
• In the same folder, execute $ npm start to run the software

Development Setup

• Install NodeJS (8.x is recommended)
• Install GruntJS globally by running $ npm install -g grunt-cli in your terminal
• Install Ruby
• Install Ruby Sass by running $ gem install sass in your terminal
• Open a terminal in the project root folder and execute $ npm install for dependency resolution
• Link Scarlett Framework
• In the same folder, execute $ npm start to run the software

Link Scarlett Framework

Scarlett Editor depends on the Scarlett Framework. In order to make the editor aware of its location, you need to use symlinks:

1. $ cd ~/projects/scarlett-framework go into the framework directory
2. $ npm link create a global link of the framework package
3. $ cd ~/projects/scarlett-editor go into the editor directory
4. $ npm link @scarlett-game-studio/scarlett-framework link install the framework

scarlett-editor/node_modules should now have the framework within. Rebuilding the framework with:

$ npm run build:editor or $ npm run build:all and refreshing/restarting the editor should be enough to update the framework version within the editor.

Extra Development Setup

• To activate automatic project build on code change (including styling modifications) simply run $ grunt in the root folder

Recommended Code Editors

• Webstorm
• Visual Studio Code
• Atom

IntelliJ/Webstorm Users

This project uses the latest Ecma6 Javascript features and therefore if you are using an IDE such as IntelliJ or Webstorm it might detect code errors when using the default settings.

To allow Ecma6 syntax make sure to change the Javascript Version in the settings menu (Settings -> Languages & Frameworks -> Javascript).

Development Hints

• All main source code can be found in the /app and /modules folders
• AngularJS 1.6+ is the main framework being used in this project
• The execution container is powered by ElectronJS
• Online Services are not configured in this Development version, you can either configure a personal server using the scarlett-webserver project or use the application in offline-mode.

Who do I talk to?

• Repo owner or admin
• Other community or team contact

scarlett-editor's Issues

Visual Scripting

Add internal visual scripting editor.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Undo/Redo hotkeys should have no propagation on the Scripting Editor

Problem

The undo/redo hotkeys are being executed for both the scripting editor and the editor history commands when the scripting editor is focused.

How to Reproduce

Open the script editor and perform Ctrl+Z/Y

Expected Behavior

When the script editor is focused the hotkeys should not propagate to the editor history commands.

Save not working

Problem

Scarlett Editor not saving correctly, due to changes in the framework's ProjectFile that have yet to be reflected in editor's master and dev branches. See #9, particularly,

scarlett-editor/app/services/sceneSvc.js

Line 106 in 786a330

scarlettSvc.getActiveProjectWorkspace().lastScene = Path.makeRelative(scarlettSvc.activeProjectPath, svc._activeGameScenePath);

How to Reproduce

Try to save a scene in the editor (File » save)

Expected Behavior

Should be able to store and load a .ss file correctly.

Inspector Container's SubContainer?

Problem

Let's say we have a class composition such as Text[DropShadow[Stroke[Color]]]

Where Color is the only class with a specific inspector editor.

How is inspector supposed to draw dropshadow properties?

Currently, it doesn't show its property Stroke because the inspector getPropertyContainers depth limit is 1. Going further one more level (see the example below) just makes Stroke appear in a different container.

function getPropertyContainers(object) {
            let propertyContainers = [];
            propertyContainers.push(createPropertyContainerFromObject(object));

            let ownContainerProperties = getObjectOwnContainerProperties(object);
            ownContainerProperties.forEach(function (property) {
                propertyContainers.push(createPropertyContainerFromObject(object[property]));

                const propertyOwnContainer = getObjectOwnContainerProperties(object[property]);

                propertyOwnContainer.forEach(function (subProperty) {
                    propertyContainers.push(createPropertyContainerFromObject(object[property][subProperty]));
                });

            });

            return propertyContainers;
        }

Which results in:

Expected Behavior

It's open to discussion, but showing the stroke properties inside dropshadow container is a possible solution.

SDF Text

Add Text Object to Editor

Editor Scripting Integration

Add an internal scripting editor.

Integrated Animator

Add internal animator editor.

Try angular-color-picker (again)

Give https://github.com/ruhley/angular-color-picker another try. Seems to be a better option.

Create a selection tree

Create a new window (or just split an existing one) with purely the selected objects. Helpful when the scene is crowded with objects.

It's basically a subset of scene hierarchy, that shows the selected objects.

Atlas Editor

Add a specific Atlas Editor window/container.

Dedicated project folder

Description

The project information should have its own folder at '/project_folder/.scarlett' and the project information should be divided into multiple files:

eg:
/.scarlett/project.json (contains project name and content files)
/.scarlett/workspace.json (contains the layout and editor related configurations)