This repository has been archived by the owner. It is now read-only.

Quick Start

Pawel Pastuszak edited this page Dec 7, 2018 · 2 revisions

VisEditor was deprecated and is no longer supported

Setup

After downloading and unpacking VisEditor simply double click the jar file. Alternatively you can run editor from command line:

java -jar /path/to/VisEditor-x.y.z.jar

Java 8 is required.

Tip for 4K display users: if editor UI is too small, launch with argument: --scale-ui or open Settings dialog and enable UI scaling option located in Experimental section.

Project creation

After loading you will see startup page, to create new project simply click New project on start page or use menu bar: File -> New project.... On the right you will see @VisEditor Twitter feed, make sure to read it some times, you will get there information about news and updates.

After first launch you will see in upper right corner, dialog like this:

Spine is a skeleton animation system for 2D games, feel free to enable it you are planning to use Spine. If you dismiss this dialog you can do it later from Settings window under tab Plugins.

Next you will see new project dialog. Here you can choose project type, currently two project types are supported: LibGDX and Generic. The Generic project is like the name says generic, it does not depend on any game framework or engine. For this project you just have to specify Project Root and Output folder. The project root is main project directory, inside it your assets and scene will be stored. Output folder is like the names says directory where to you project will be exported.

The other project type is LibGDX. For this project type you have to specify Gradle root directory. If you are using default project from LibGDX gdx-setup then the source and assets folder are already set so you don't have to change them. During project creation your assets from root/android/asset folder will be moved to root/vis/assets.

Currently there aren't any differences between those two project types, but in the future LibGDX project would have more features focused for LibGDX development for example launching your game straight from the editor.

Press Create, you project will be automatically opened.

First scene

Let's create out first scene, to do so use menu: Scene -> New Scene... you will see dialog like this:

Here you can set scene properties, type in scene name and press Create. Editor will ask you to open your new scene, press yes. (Tip: to open any other scene, in content browser navigate to scene directory and double click .scene file.). All scene files must be located in /scene subdirectory. Now with te scene loaded we need asset that we can work with, for the example when use Kenney Tappy Plane free assets, download them from here.

To pan camera in scene press and hold right mouse button. To change zoom use mouse wheel.

In editor content browser navigate to gfx directory and press button with folder icon to open current folder in your system explorer.

From unpacked TappyPlane zip file copy all files from PNG folder into gfx folder so it will look like this:

Go back to the editor, you will see that all your copied assets are now visible in content browser and ready to use:

To add asset to scene simply drag and drop them into scene view. Your sprite will appear in scene view, after you click it you will see entity properties window. Here you can adjust entity scale, position, rotation, tint and so on. Depending on selected entity you may see different set on options. Tip: in any of the number filed in properties dialog you can press Ctrl or Shift with Plus or Minus key to quickly change values by 1 or 10.

Drag the background onto scene. You will notice that our scene size is too big.
We can quickly change that, use menu `Scene -> Scene Settings' and change width and height to 8 and 4.8.

Now our background fits perfectly!
Finish the rest of scene, add and arrange entities however you want. Tip: to change z-order of entity, select it and press Page Up or Page Down. Entity must overlap other entity in order this to work. You can select multiple entities by holding and dragging left mouse button.

After you are done you must export your project.

Export progress window will appear. If you are using LibGDX based project you can follow to next part about loading your scene from code. For generic project type you will have to write your own loader. VisEditor LibGDX runtime may be a good start.

Loading scene from code (LibGDX only)

Before continuing setup your LibGDX project. Loading exported scene is really easy.

public class ExampleApplication extends ApplicationAdapter {
	SpriteBatch batch;
	VisAssetManager manager;

	Scene scene;

	@Override
	public void create () {
		batch = new SpriteBatch();

		//VisAssetManager is a extension of standard LibGDX AssetManager, 
		//it makes loading scene easier
		manager = new VisAssetManager(batch);

		//here we load our scene, this is a blocking operation and it 
		//will block your app until loading entire scene is finished
		scene = manager.loadSceneNow("scene/test.scene");
	}

	@Override
	public void render () {
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		scene.render();
	}

	@Override
	public void resize(int width, int height) {
		scene.resize(width, height);
	}

	@Override
	public void dispose () {
		//here we must release used resources, Scene itself is 
		//disposable but because we loaded it via AssetsManager will dispose it for us
		batch.dispose();
		manager.dispose();
	}
}

In the above example we use manager.loadSceneNow(...), but this isn't the only way you can load scene, you can load is asynchronously and display progress bar, refer to AssetManager guide for more infomration.

Adding own managers and systems into entity engine

SceneParameter parameter = new SceneParameter();
parameter.config.addSystem(GameManager.class);
parameter.config.addSystem(GameSystem.class);
parameter.config.addSystem(OtherGameSystem.class);
//prior to 0.3.1 versions:
//parameter.config.addSystem(new GameSystem());
//...

scene = manager.loadSceneNow("scene/game.scene", parameter);

SceneParameter passed into asset manager allows you to add your own managers and systems into entity engine.

Enabling FreeType

You are using FreeType fonts (TrueType ttf font files) you must enable it before loading scene:

manager = new VisAssetManager(batch);
//...
manager.enableFreeType(new FreeTypeFontProvider());

Remember that you must have FreeType Gradle dependency in your project.

Enabling Spine for VisRuntime

If you are using Spine in your game then you must enable Spine support. First add vis-runtime-spine.jar to your project dependencies, follow this guide for that, then simply register Spine support in VisAssetManager:

manager = new VisAssetManager(batch);
//...
manager.registerSupport(new SpineSupport());

Next steps

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.