Game editor on Phaser

[shmikucis 30]

Recently our team has created two mini-games using Phaser.io and we find it pretty useful. We at MightyFingers decided to help fellow game developers and created editor on top of it and called it "MightyEditor". The idea is pretty simple - make it easier for everybody to work with the framework. Currently we have very basic features implemented like asset management, map creation, grouping in levels and data exporting. However without these basic things we would spend quit a time to create all levels we have.

 

How does it work? Editor is web based tool and doesn't require any hassle like installation or authorization to the system. Simply go to http://mightyeditor.mightyfingers.com/ and system will give unique URL where you will be able to return later on and continue your work with map creation. Real time testing is as simple as including URL given on editor top right in your game project. You can export data from editor at any time, no dependencies here. We have tested editor only on Chrome, no guarantee for other browsers

 

 

For more info check out editor features section at our home page.

 

Video tutorial https://www.youtube.com/watch?v=7dk2naCCePc

Here is a list of the features that we are planning to implement in the future. Please vote for your favorite/most needed one or even request a new one – so we can focus more on the most required features:

• text object
  
• zoom in / out
  
• sound management
  
• tile map support
  
• import from tiled editor
  
• export to tiled editor
  
• sprite animation editor
  
• tween editor
  
• source editor
  
• user and multi user support
  
• version control for the projects
  

[rich 2,461]

Wow! Going to have a play with this today

[Luis Felipe 17]

This is so awesome! I'm voting for sprite animation editor, tween editor (would this allow you to create tweens for bg elements? For example, I'm thinking like streetlights and having the beam of lights sway from side to side using tweens), and zooming in.

 

Fantastic work, I absolutely love that it's web based

 

EDIT: One quick question, does the intersection of the two red axis lines represent (0,0)? I asking because in your tutorial you placed the level right in the middle, so virtually, it should be off screen right? Unless the camera is set to follow the character/fixed position?

 

I'm asking because, say you wanted to add something later on in Phaser, but not going back to MightyEditor, you would have to place an object, for example at: game.add.sprite(-300, -230, 'newObject'), but it would obviously be much more difficult so see if you placed it just right. I don't know if I'm being clear, I can elaborate if need be

[rich 2,461]

Here's a suggestion for the editor: in the video you spend a lot of time adjusting values because you can't determine the frame size from a sprite sheet. What you could add is the ability to parse the filename. For example: explosion32x20.png - the editor could automatically figure out the sprite sheet uses a 32x20 sized frame and set the values accordingly. Just a thought anyway

 

In terms of features I would vote for a physics properties editor

[stauzs 26]

Rich - great idea about added info to the filename - definitely will add this.

 

Luis - yes, the red lines are x = 0 and y = 0, and yes - you will need to adjust the camera after the game is loaded - but for some reason I felt that it "would make sense" as character stands in the middle.

I added a few lines (actually, I got excited a little bit) of code to make this map alive: http://mightyfingers.com/games/editor-demo-game/

and you can download the source if you wish: http://mightyfingers.com/games/editor-demo-game/source.zip

[gaelbeltran 8]

I vote for texture atlas integration, but that's not on the list

[Mike 55]

That's the lovely world of open source and community.

I'm going to test it asap and will write my ideas...

 

Btw a time ago i was thinking for a "walk map" editor for a point and click adventure games.

 

So the walkable area is defined in polygons and the idea is you have a "image reference with your scene level" 

and you draw over it wit points and lines and beziers and then you have all the polygons as coordinates.

 

Also the next on this idea is to make zones which will transport you from one map area to other area.

 

I'll check the source and will try add something like this if i can but anyway others ideas are also good ones I'll keep an eye 

on this phaser editor.

[stauzs 26]

hi,
I have just updated the editor, the update contains:

 

* support for the tile size in filename as Rich suggested: e.g. monster_run_64x64.png

* help links

* graceful shutdown for maintenance with a nice notification message

* bugfix: asset deletion - db and temporary objects got out of sync

* phaser's default "__missing" image for objects with deleted image

* updated phaser source, also now uses a minified version of phaser with source map for faster startup

* firefox support - however, I could not find a way to handle the dropped folders in firefox - so assets uploading isn't as nice as it is on webkit based browsers

 

 

P.S. if someone got a broken project because of the unclean shutdown - you can use ctrl + z to get the previous version - as undo steps are saved in the local storage.

[CrazySam 5]

I vote for github integration!  

[Salvatore 1]

Hey, you guys have to putt the size of the sprite in the object settings!!! \o

[Cirta Games 0]

That's a very ambitious and useful project that will help much developers.

 

Keep up the good work !

[Neoprofessor 17]

Wow. Very cool. I think this editor might need a forum category of it's own.

[neon 2]

Just found about your project. Looks very nice,I make something similar and know that it's not that easy. Keep good work!

[shmikucis 30]

> Salvatore

OK, we'll put sprite width x height in preview (when hovering asset). I suppose that you don't need to change these parameters. Do you?

 

> Neoprofessor
Actually good idea. It looks like there are some interest in editor. Also we are planning to put regular updates and ask for feedback. Richard, what do you say?

 

> neon
Great, I would like to see your work.

[neon 2]

See my signature for my project forum thread. But I'm not as far as you. Have no version online yet, only some screenshots and two youtube videos.

[rich 2,461]

Actually god idea. It looks like there are some interest in editor. Also we are planning to put regular updates and ask for feedback. Richard, what do you say?

 

Drop me an email

[Salvatore 1]

Will be a good one, case we need to resize the sprite.

[haden 48]

@shmikucis, this is really impressive. I'm curious, what are you using to code the UI elements, JQuery UI ?

[stauzs 26]

Hi,

 

This week we have mainly worked on the text object editing options and text tools.

Here is what came out:

 

 

Also, this update contains:

* width and height info at the image preview bottom corner

* exposed width and height properties in the object settings panel

* exposed isFixedToCamera option for groups

* small usability fixes like object cloning while holding the 'alt' key

* joined project options ('new', 'clone') under Project menu

 

More info about text object: http://docs.phaser.io/Phaser.Text.html.

 

Also, a simple google fonts intergartion has been added as the final touch.

 

You can write any font name in the input field - and editor will automagically get font from google fonts.

Also, check out example.html in the exported zip.

[stauzs 26]

@haden

Before I started to work on the editor I tried to find a nice web UI framework that would fit my needs - it was mainly panel, panel docking, and panel joining options - something like this https://codio.com project uses,

but I failed - there was none available for public (or I'm just a bad googler).

 

Finally, I just started to put DIVs together.. and this is what came out.

[Mike 55]

Hey, Stauzs I just played with the text and it seems that the text align isn't still working.

 

I got 600px text area and one world which i try to center or align right... but with no success.

[stauzs 26]

@Mike I haven't put any additional functionality - except for phaser's default behavior - and phaser's text align doesn't work the way I was expecting.

 

atm. there is possible to set wordWrapWidth property - but aligning works based on longest text line, not the wordWrapWidth - so if you have 1 line there won't be any visual changes.

 

I'll check for solutions and implement a text box.

[haden 48]

@haden

Before I started to work on the editor I tried to find a nice web UI framework that would fit my needs - it was mainly panel, panel docking, and panel joining options - something like this https://codio.com project uses,

but I failed - there was none available for public (or I'm just a bad googler).

 

Finally, I just started to put DIVs together.. and this is what came out.

 

Good work, turned out really nice

[stauzs 26]

hi,

 

just made a small update:

* fixed text align by wordWrapWidth 

* fixed bounding box for custom fonts ( after font has been loaded - PIXI.Text.heightCache )

* new feature - zoom - select from dropdown zoom level or use the mouse wheel to zoom in/out

* added "locate object" button - centers active object or sets camera position to 0,0

[Kai 5]

I would highly recommend making an editor like this open source.  There are a lot of similar services launching - typically with a tiered subscription model, and I think it's a model that fragments the HTML5 gamedev community.

 

I would like to see a completely open IDE for game development.  The revenue can be made on associated services: hosting, publishing, integrating ad networks.