shmikucis

Game editor on Phaser

88 posts in this topic

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 :)


 


post-4149-0-89217400-1399630690.png


 


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

post-4149-0-17695900-1399630377.png


Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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 :)

Rudrabhoj Bhati and stauzs like this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

> 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.

Salvatore likes this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites
Hi,

 

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

Here is what came out:

 

post-text.png

 

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.

Share this post


Link to post
Share on other sites

@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. :)

haden likes this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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.

Mike likes this

Share this post


Link to post
Share on other sites

@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 :P

Share this post


Link to post
Share on other sites

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

Mike likes this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.