dovyski / flixel-studio

Embeddable, in-game editor for HaxeFlixel. Turn the existing Flixel debugger into a full-featured editor!

flixel | addons | ui | demos | tools | studio | templates | docs | haxeflixel.com

About

NOTICE: this project is in early days of development! Things are expected to change and/or break. Documentation and features are still very rough, but they will eventually mature in the near future. Check the ROADMAP to have an idea of how the project will evolve.

Flixel Studio is an embeddable, in-game editor for HaxeFlixel. Simply put, when enabled in a project, Flixel Studio will turn the existing Flixel debugger into a full-featured editor. You can then organize game elements using layers, edit tilemaps, change properties of game objects, among many more things.

The philosophy behind Flixel Studio is to empower game developers with tools that integrate directly into their game runtime/code.

Features

• Full-featured in-game editor.
• Load and modify tilemaps.
• Edit properties of game objects, e.g. position, velocity, etc.
• Manage game elements in layers of content.

Getting started

1. Install the flixel-studio lib

Get the latest development version from Github:

haxelib git flixel-studio https://github.com/Dovyski/flixel-studio.git

NOTE: in the future, you will be able to install flixel-studio from the haxelib repository.

2. Add the flixel-studio lib to your project

Go to the folder where you have your project files, open the file Project.xml, then add the following:

<haxelib name="flixel-studio"/>

Usually libs are listed in the libraries section of the Project.xml file, which will probably look like the following after you add flixel-studio:

<!--------------------------------LIBRARIES------------------------------------->

<haxelib name="flixel"/>

<!--In case you want to use the addons package-->
<!--<haxelib name="flixel-addons" />-->

<!--In case you want to use the ui package-->
<!--<haxelib name="flixel-ui" />-->

<!--In case you want to use nape with flixel-->
<!--<haxelib name="nape" />-->

<haxelib name="flixel-studio"/>

3. Usage (code)

After installing and adding flixel-studio to your project, you are ready to start using it. To make Flixel Studio available for use in your game, call flixel.addons.studio.FlxStudio.create() anywhere in your code, e.g. in your Document class or in your FlxState's create() override.

Below is an example of a call in the game's create() override:

override public function create():Void
{
	super.create();

	// [your own code here]

	flixel.addons.studio.FlxStudio.create();
}

Below is an example of a call in the document class:

package;

import flixel.FlxGame;
import openfl.display.Sprite;

class Main extends Sprite
{
	public function new():Void
	{
		super();
		addChild(new FlxGame(0, 0, MyInitialState));	
		flixel.addons.studio.FlxStudio.create();
	}
}

3. Usage (in-game editor)

When you compile and run your game, you can just bring up Flixel's debugger (by pressing the key below Esc), then click the interaction tool in the bar at the top.

When Flixel Studio is enabled in a project, the interaction's panel of tools on the right have more items, e.g. a tile tool. Addionally, you will see a few new debugger windows showing layers of content, etc. Enjoy your in-game editor!

Contribute

The development process is a little bit rough right now. It's basically me coding and changing things a lot, documenting things very superficially along the way. At some point, the APIs will stabilize and it will be a lot easier to join the party.

If you want to help now, you can take flixel-studio for a ride and send me your feedback, or suggest a feature, report a problem, or even send a pull request. Check the ROADMAP to have an idea of how the project should evolve.

License

Flixel Studio is licensed under the terms of the MIT Open Source license and is available for free.

Changelog

See all changes in the CHANGELOG file.

flixel-studio's Issues

Perfomace issues on the neko target

In the Neko target the framerate drops to 30 instead of 60 fps, while on other targets like flash and HTML5 the framerate works normally

Another issue is the dropping letters that affected the HTML5 and Neko target

That's all i can say, the tool is very usefull and efficient keep it up

• HENOOB

Tile Selection Box wrong size

It seems like the tile selection box is not accounting for zoom level correctly, making it difficult to select the correct tiles:

Package as a haxelib

The awesome haxelib-helper by @ianharrigan is a great foundation.

Neko: Game crashes when Tile Editor selected

Thought I'd take things for a spin this morning, using this code:

package;

import flixel.FlxState;
import flixel.tile.FlxTilemap;
import flixel.addons.studio.FlxStudio;

class PlayState extends FlxState
{
	public var tiles:FlxTilemap;
	
	override public function create():Void
	{
		super.create();

		tiles = new FlxTilemap();
		tiles.loadMapFrom2DArray([for (j in 0...16) [for (i in 0...16) 1]], AssetPaths.tiles__png, 8, 8);
		add(tiles);

		FlxStudio.start();
	}
}

When I press the Tile Editor tool in the debug menu, the game crashes with this output:

Called from sys.io.FileOutput::$statics line 1
Called from ApplicationMain::main line 32
Called from ApplicationMain::create line 244
Called from lime.app.Application::exec line 167
Called from lime._internal.backend.native.NativeApplication::exec line 163
Called from a C function
Called from lime._internal.backend.native.NativeApplication::handleMouseEvent line 413
Called from lime.app._Event_Float_Float_Int_Void::dispatch line 101
Called from openfl.display.Stage::__addWindow line 1521
Called from openfl.display.Stage::onMouseUp line 1066
Called from openfl.display.Stage::__onMouse line 2028
Called from openfl.display.Stage::__dispatchStack line 1723
Called from openfl.display.Stage::__handleError line 1835
Called from openfl.display.Stage::__dispatchStack line 1690
Called from openfl.display.DisplayObject::__dispatch line 1235
Called from a C function
Called from openfl.events.EventDispatcher::__dispatchEvent line 443
Called from flixel.system.ui.FlxSystemButton::onMouseUp line 104
Called from flixel.system.debug.interaction.tools.Tool::onButtonClicked line 94
Called from flixel.system.debug.interaction.Interaction::setActiveTool line 442
Called from flixel.addons.studio.tools.tile.Editor::activate line 50
Called from flixel.addons.studio.tools.Tile::refresh line 76
Called from flixel.FlxSprite::makeGraphic line503
Called from flixel.system.frontEnds.BitmapFrontEnd::create line 136
Called from flixel.graphics.FlxGraphic::fromRectangle line 225
Called from openfl.display.BitmapData::$init line 152
Called from a C function
Called from openfl.display.BitmapData::new line 296
Called from lime.utils.ArrayBufferView::$init line 14
Called from a C function
Called from lime.utils.ArrayBufferView::new line 42
Called from haxe.io.Bytes::alloc line 462
Uncaught exception - $smake

Tested flash and cpp builds and it's working well though! Great work 👏

Integrate djflixel

DjFlixel is an awesome Flixel tool to create effects and great UI. This should definitely be integrated into Flixel Studio from day one. It is even MIT licensed, how cool!

Prevent editor from closing when there is unsaved work

This is the way of doing it.

Create a project roadmap

I have many, many ideas for Flixel Studio. A roadmap would help spread them and foster discussion. It would also give a better glimpse into where the project currently is and where it is heading.

Create a website for the project

My initial idea is to create a website for the project and put all the documentation, guides and tutorials there.

Consider using FlxScene for persistent state storage

As mentioned in HaxeFlixel/flixel-addons#142 by its author, FlxScene was created with some kind of scene editor (perhaps similar to flixel-studio) in mind.
We'll need a saver producing compatible XML, but at least we don't have to write a parser/loader from scratch.

FlxScene demo source: https://github.com/HaxeFlixel/flixel-demos/tree/master/Features/FlxScene

Update README with essential documentation

The existing README is a ripoff of flixel-ui. It must contain at least how to install and use flixel-studio. Further documentation will be added when we reach the 1.0 milestone.

Add tool to dynamically control game zoom

It would be nice to have a tool that allows developers to zoom the camera's game in and out. It is useful when you are designing a level and want to have a better view of everything.

Issue PR on haxeflixel/flixel to allow flixel-studio to work out of the box

Currently, flixel-studio does not compile with a vanilla version of Flixel because it requires access to some private elements (they need to be made public). Fixing this should be quite easy. I'm openning this issue to keep this task visible and alive.

Create a proper logo for the project

The current logo was quickly hacked by me just to have something to show. It would be nice to create a proper logo following other tools/projects in the Haxeflixel ecosystem.

Flixel-studio initialization and usage

First of all, let me thank you for all the time and effort you're putting into this tool. It's already useful and looks even more promising. I'm really happy someone is actually working on this :-)

Unfortunately, trying to start using flixel-studio I was slightly confused by what seems to be a contradiction between how it's supposed to behave and what it actually does.

The readme suggests you can put FlxStudio.start() into any of your game's FlxState's. But since 15e59b5 it looks like the actual initialization in bootstrap() function happens only when the core engine's gameStarted signal is dispatched, which in turn happens only once on game startup (well, on resets too, but I'm not sure if they're commonly used). That makes it neccessary to call FlxStudio.start() at least in the initial game state (one that's passed as FlxGame's constructor argument). On the other hand, calling FlxStudio.start() anywhere else doesn't have any effect (again, possibly except some corner cases with FlxG.resetGame()).

And I personally find this behaviour preferable to manually placing FlxStudio.start() everywhere you might need it. So probably that's just the docs that need to be updated. Unluckily, current implementation breaks entities inspector. Perhaps, flixel-studio needs a way to run some of its procedures (e.g. getting _entities list for EntitiesWindow) automatically after every state switch and not in bootstrap()? That might require introducing something like postStateCreate signal into the core, but that should be trivial.

So, before I make any PR's, which I'd do gladly, is there anything I'm missing here?