Game editor on Phaser

Recommended Posts

added package.json


actually, for runtime only ws is required and uglify-js - for the minification tool


I have only tested on linux - not sure if it will work on other OS out of the box - but shouldn't require a lot of changes to make it work - after all it's javascript :)


I should add it to the also :)

Share this post

Link to post
Share on other sites


Today, MightyEditor got a new feature - a source editor.


It allows you to create a game or a mock-up and share it with your team or friends.


Source editor comes with:

* basic autocomplete - for common javascript keywords and Phaser static members (e.g. constants)

* jshint - so errors and typos can be cought earlier



From now on, all the projects will start with a basic game template - and with a few lines of commented extra code as a loading example.


mt.helper.js (formerly mt.import.js) - a helper library that allows to create sprites and groups from data easier,

it has been updated with a new functionality like assets loading for particular sprite group 

and possibility to use a group created in the map editor as a template for many other objects in the game.


Additional improvements:


* now you can drag an image or a file right into the folder

* added viewport width/height - now you can see bounds right on the map editor



In the next releases, it is planned to add:


* predefined game templates e.g. infinite runner/platformer

* expose physics properties


And a larger update: 

* timeline with keyframes based on the tweens



Also, during the next few days, we are planning to add a few demos.

Share this post

Link to post
Share on other sites

@codevinsky - I'll add it in the next release (planned next week) - I miss that one myself :)


@gaelbeltran - I'll also add the font size option in the next release - in the mean time, you can use Ctrl+/- (default browser zoom); I'm not 100% sure if the editor won't start bugging, however, my quick test was successful

Share this post

Link to post
Share on other sites


MightyEditor has been updated and the following changes have been made:


User Data:


Now you can add key/value pairs to the Asset or Object

Sprites will inherit user data from asset - it is useful if you want to create multiple objects from a single sprite

in other words - use the asset as a template for multiple sprites

You can access the user data from game in the following way:

// create predefined sprite
var mySprite = mt.create("mySprite");
// get editor data from sprite
var data = mySprite.getData();
// get userData
var myData = data.userData;

Just remember that the editor data and user data are shared between sprites. e.g.

// create sprite
var mySprite1 = mt.create("mySprite");
// create same sprite again
var mySprite2 = mt.create("mySprite");
mySprite1.getData() == mySprite2.getData() // true



Added physics options for the Arcade physics


mt.create will automatically add physics body to the sprite


you can enable physics options to the entire group 

and all sprites in the group will inherit parents properties - e.g. you can set immovable only to the group and leave all platforms alone


you can add specific physics options to the asset and the created object will have the same properties as the asset (same as with the user data).

properties are not shared between the asset and the object


added physics debug button to highlight bodies


note: you need to enable arcade physics in your code to use physics





 Added feature to remember current panel layout. At the moment, there are 2 views: Map editor and Source Editor view.

Editor will automatically remember panel position and restore it when you come back for each view.


 Added option panel for UI related settings. At the moment, there are only 2 options - UI color and Source Editor font size

Also added Reset layout button - sometimes you can lose floating panel by dragging it out of the screen - or just by lowering screen resolution.

Reset layout will reset panel layout to the default layout.


 To access the UI settings, click the MightyEditor logo located in the top/left corner


 Added welcome popup with the list of the recent projects - be aware that data is stored into browser's local storage

if you clean the site data on  the browser, popup won't show recent projects - should be fixed with some sort of authorization




Miscellaneous bug-fixes:

  • fixed duplicated asset upload
  • tilelayer:
    • fixed update preview after altering asset
    • fixed grid - in some cases it was drawn wrong or just didn't get update
    • fixed tilelayer cropping bug

  • fixed alpha option for group
  • fixed to camera option won't affect map preview anymore
  • added options to quickly access JSON data (till now, they were available only in js format)
  • moved Open Sample from drop down to the first level and renamed to Open Game
  • mt.createGroup has been replaced by mt.create (mt.createGroup is still valid, but will show warning in the console)
  • color picker widget for color input
  • now camera position gets updated after zoom has been changed


Share this post

Link to post
Share on other sites

I've wrote tutorial how to create mini-game in the cloud using Phaser and MightyEditor


Tutorial is covering some aspects of game development: game states, asset management, sprite animations, physics, collisions, overlapping, input & controls. At the end there is playable game prototype in less than 140 code lines.


Probably I need to write some more simplistic tutorials for each feature separately. Also video could help. What do you think?



Share this post

Link to post
Share on other sites



at the moment - projects are stored in the local storage at browser side.


In the earlier versions every time you opened - you got automatically blank project with custom id something like: pd7s

Now id is added to the project only after you create new project.


In the loadProject menu - script checks local storage entries and displays all projects that are stored there. For older projects it shows pd7s (pd7s) and for newer - ProjectTitle (pd7s).

Your only link with your project is project_id - it is recommended to save it ( or bookmark it).


Theoretically it's impossible that loadProject menu would show some random projects - it just shows all that can be found on browsers local storage.


Also if you will enter - next time it will show also pd7s project at Recent Projects menu


And finally if you have open project and then goto Project -> clone - editor will copy current project and assign new id to the copied project.


You can clear all projects by hitting ctrl+shift+delete and checking: "Cookies and other site and plug-in data"


This is temporary solution as it isn't very useful an you can clear that list accidentally.


This functionality will change with user account feature.




after receiving an e-mail with screenshot. There is a bug indeed - with "project" named ui (ui) - in the earlier versions UI layout has been stored with key "ui" - it's non-critical bug - as it will just reload page and bring back to recent projects list - but will be fixed with the next release.


thank you for your time and efforts!

Share this post

Link to post
Share on other sites



today I updated editor,


a lot of changes has been made in a way how editor handles objects in a preparation for tween animations.


Added scale, rotate and move anchor gizmos.


Hold down shift key to maintain aspect ratio while re-sizing an object. 

Hold down ctrl key to increase object's size by 10% while re-sizing an object or to change an angle by 15 degrees while rotating an object.


Temporary moved wordWrapWidth property to sidebar - previously you could change it from map editor directly.

Also font size and font family has been separated (previously it all was under one key -  font).



Share this post

Link to post
Share on other sites


Just a few minutes ago, I have added the following updates to Mightyeditor:


Now, the editor is available on a US based server -

Hopefully, it will resolve many problems due to slow connection to the server.

Mightyeditor will try to detect clients ipgeo location and - if the user comes from North America - it will redirect to the USA server.

You can force to use the EU server with the url:

or USA server with the url:


Projects are not shared between servers automatically (the reason is very simple - to save the disk space on the servers),

but you can still move projects manually from US to EU and back by clicking Project -> clone (eu / us)


  • Tooltips for tools and the upload notification box added
  • Missing minified files (e.g. jshint) added to improve the loading speed
  • Physics debug highlight fixed (if camera has been zoomed)
  • Regression bug with google fonts fixed
  • Export option fixed - in some cases it failed to export project completely
  • Object texture change fixed - sometimes the wrong object got affected

Share this post

Link to post
Share on other sites

Hey, this project looks amazing! Good job!

I have my own "framework" on top of Phaser and a workflow already established. I'm in the middle of a project and I don't think I will have time to learn and switch to Mighty Editor, but I find the Map Editor very useful for to easily create maps for Phaser without having to use tiled maps.

Is it possible to easily import my code into the editor, generate the maps, and have them exported as files I can load working with my current workflow?

Thanks! :)

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.