Editor

URL

Online based game editor mightyeditor.mightyfingers.com

Video

Working with MightyEditor

Table of contents

  1. Getting Started
  2. Working with Assets
  3. Creating a Map
    1. Objects
    2. Text
    3. Tilemap
    4. Keyboard Shortcuts
  4. Physics
  5. User Data
  6. Source Editor
    1. Keyboard Shortcuts
  7. Editor Settings
  8. Exporting a Project
  9. Future Features
    1. In progress
    2. Pending Features

Getting Started

If you have opened the editor for the first time you will see a welcome popup. To create a new Project click Create New Project Button – MightyEditor will ask you for the project title and will automatically create a namespace for your project – you can change the namespace to fit your needs. All new projects start with an empty map and assets for the loading screen. If you click Open Game now – you will see the loading screen (loading might be very fast – if you have a good internet connection).

* You can also access the welcome popup from an already opened project (Project -> Home)

Simple Workflow:

  1. Add assets
  2. Fill the map with the objects
  3. Add some lines of code
  4. Open the game – and check if everything works as expected
  5. Export the game

Working with Assets

Drag and drop the files or directories from the file explorer into the browser window to add the assets.
Check out this video: https://www.youtube.com/watch?v=7dk2naCCePc

If you need additional data (e.g. frame size for a spritesheet) – select an asset from the asset list and edit the properties. At the moment, you can edit the following properties:

  • key: unique asset key of an image or a spitesheet file – this is the default location in the assets tree (e.g. /monsters/huge_boss.png)
  • frameWidth: width of each single frame
  • frameHeight: height of each single frame
  • frameMax: specifies how many frames there are in a spritesheet; if not specified, this will divide the whole image into frames
  • margin: if the frames have been drawn with a margin, specify the amount here
  • spacing: if the frames have been drawn with spacing between them, specify the amount here
  • anchorX: all new sprites will inherit this property
  • anchorY: all new sprites will inherit this property

More info:
http://docs.phaser.io/Phaser.Loader.html#image
http://docs.phaser.io/Phaser.Loader.html#spritesheet

* You can change the image file name by double clicking it


Creating a Map

Check out this video: https://www.youtube.com/watch?v=7dk2naCCePc#t=14 Available tools:

  • selection tool: allows to select, move, resize and rotate objects on the map; click an object to select it or drag the selection rectangle to select multiple objects
  • stamp tool: creates a new object from the active asset and places it on the map next to the cursor position – hold down the ctrl key to snap the object to the grid
  • brush tool: allows to create multiple objects aligned to the current grid
  • tile tool: tool for working with tilemap layer
  • physics tool: show / hide physics bodies

 

 

Click the background (any free spot on the map) to access the map properties. You can edit the following properties:

  • cameraX – camera’s position on the x axis
  • cameraY – camera’s position on the y axis
  • worldWidth – width of the imaginary game world
  • worldHeight – height of the imaginary game word
  • viewPortWidth, viewPortHeight – optimal game resolution – you can zoom in to fit the screen
  • gridX – grid size on the x axis
  • gridY – grid size on the y axis
  • showGrid – enable/disable grid
  • backgroundColor – background color

* You can drag the camera with the right mouse button

Objects

Editor supports:

 

 

* You can place an object on the map with the stamp tool or you can add multiple objects easily with the brush tool. By selecting an object, you can access its properties. Available properties for a sprite:

 

* You can also resize and rotate a sprite with the select tool Available properties for a group:

Text

select the text tool from the tool panel (at the left side) click anywhere on the map to place a text object adjust the text object properties from the toolbar

 

Tilemap

create a tile layer from the object panel menu select the created layer adjust properties in the bottom panel, all the assets will automatically appear in the tile selection preview select tile(s) from the palette and place tiles on the layer to delete a tile, hold down the ctrl key

 

Keyboard Shortcuts

esc – deselect any selected object 2x esc – deselect any selected object and switch back to the selection tool ctrl + Z – undo ctrl + shift + Z – redo ctrl + C – copy selected object(s) ctrl + V– paste select object(s) at the cursor position

To select multiple objects - hold down the shift key
To make a clone of the selected objects - hold down the alt key
To enable snapping to the grid - hold down the ctrl key

Physics

Physics options for the Arcade physics – physics options is accessible next to settings. 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

Enable physics plugin to highlight physics bodies over the objects

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

Available physics options:

  • enable: enable/disable physics
  • immovable: An immovable Body will not receive any impacts from other bodies
  • size:
    • width: width of the body ( leave it as -1 to inherit the width from the sprite)
    • height: height of the body ( leave it as -1 to inherit the height from the sprite)
    • offsetX: offset on the x axis
    • offsetY: offset on the y axis
  • bounce
    • x: horizontal elasticity of the body when colliding. ( 1 – full rebound, 0 – no rebound)
    • y: vertical elasticity of the body when colliding. ( 1 – full rebound, 0 – no rebound)
  • gravity:
    • allow: enable / disable gravity
    • x:  gravity on the x axis
    • y: gravity on the y axis
  • rotation:
    • allowRotation: enable / disable rotation
    • maxAngular: the maximum angular velocity in pixels per second2 that the Body can reach.
  • maxVelocity: the maximum velocity in pixels per second2 that the Body can reach
  • mass: the mass of the body
  • collideWorldBounds: allow / disallow object to leave the world

User Data

You can add key/value pairs to the Asset or Object. Sprites 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

Source Editor

A new project comes with a pre-built template:

  • css – folder for css files
    • main.css – default style sheet file
  • js – folder for js source files
    • lib – external libraries
      • mt.data.js – project data file – gets updated every time you change the map
      • mt.data.json – json variant of mt.data.js
      • mt.helper.js – MightyEditor API – automatically updates – if you want to hack it – create a copy of this file and replace the source in the index.html file
      • phaser.js, phaser.min.js, phaser.map – phaser source files + source map for debugging
      • phaserHacks.js – miscellaneous improvements for the phaser framework
    • state – stores the game states (e.g. loading, menu, play)
      • boot.js – boot state – prepares the game for launching, adjusts the screen size, preloads the assets for the loading screen, automatically starts the loading state
      • load.js – loading state – shows loading while all assets are loading and automatically proceeds to the menu state
      • menu.js – menu state – shows the game main menu
      • play.js – play state – all gameplay code should go here
    • main.js – entry file – creates a game instance and starts a boot state
  • index.html – add the additional source files here

Simply click the source file to open it.

Side panel buttons:

  • New File – creates a new file
  • New Folder – creates a new folder
  • Save – saves the current document
  • Delete – deletes the currently opened file

* You can also drag any file from the file explorer on the source tree – the editor will automatically upload the dropped file – just like with the asset images
* You can close the opened file by clicking the mouse middle button

* You can drag and drop the files and folders in the tree view

Keyboard shortcuts:

  • Ctrl + Z – undo
  • Ctrl + Shift + Z – redo
  • Ctrl + S – save the current document
  • Ctrl + Space – open the autocomplete menu
  • Ctrl + X – cut
  • Ctrl + C – copy
  • Ctrl + V – paste
  • Ctrl + Alt – start the rectangular selection
  • Ctrl + Alt + Down – copy the line down
  • Ctrl + Alt + Up – copy the line up
  • Ctrl + D – delete a line or selection
  • Ctrl + / – comment line(s)
  • Shift + Tab – auto align indentation

Editor Settings

To access the editor settings – click the editor logo on the top left corner

UI:

  • backgroundColor – changes UI background color
  • Reset Layout button – resets the current layout to the default one

SourceEditor:

  • fontSize: font size for the source editor

Exporting a Project

You can export project by clicking Export -> Phaser.io (.js) – it will make zip archive with all files related to your project.

If you don’t need all the files, you can access only mt.data.js (or mt.data.json) by clicking
Export -> Phaser.io (data only) …

* make sure the popup blocker hasn’t disabled the popup window

Future Features

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

In progress

  • sprite animation editor
  • tween editor

Pending features

  • user and multi-user support
  • sound management
  • import from tiled editor
  • export to tiled editor
  • version control for the projects

33 comments on “Editor

  1. Absolutely great work, only concern is security of the projects. If someone has the link they have complete control to edit/ruin your project as they please. If there was a bit more obscurity in the link that would at least help but currently it looks like it’s a 4 character ID for the projects and they are sequentially generated. I reeeaaaally want to use this but I just cannot when I know that I could be working on something and have some 12 year old who figured out how to pull up other people’s projects replace all my assets with phallic images.

    Your easiest solution would be to just obscure the link. Have the public link a 8+ character randomly generated string so the hope of someone just randomly typing something in and getting a project is slim. Security by obscurity is never ideal but it’s something you should be able to resolve with minimal effort.

    I hope you take this request seriously and act quickly as I found mightyeditor from this tutorial: http://www.gamedevacademy.org/make-a-quick-phaser-compatible-game-using-mightyeditor/ (written by guntis)
    Which links to the: http://mightyeditor.mightyfingers.com/#pde5-copy
    The original project is clearly pde5 without the -copy so all anyone has to do is pull that up and edit it (which I have done btw) and anyone else who sees the tutorial will see the edited version if they pull up the link. This doesn’t make your product look very good.

    1. Hi Prachi,

      it is live.
      Do you use Google Chrome?
      Do you use proxy? (there can be problems with proxies)
      What error do you have in console?

  2. I noticed your website’s ranking in google’s search results is very low.
    You are loosing a lot of traffic. You need hi Page Rank backlinks to rank in top ten. I know – buying
    them is too expensive. It is better to own them. I know how to do
    that, simply google it:
    Polswor’s Backlinks Source

  3. Howdy! I could have sworn I’ve been to this site before but
    after checking through some of the post I realized it’s new to me.

    Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back often!

  4. the editor is not loading after i’ve created a free account and entered game info its just stops there. is some kind of maintenance going on now or i am the only one facing this problem??

  5. I was basically cruious about if you ever considered switching the page layout of your web site? Its very well written; I enjoy what you have got to state. But maybe you could include a a bit more in the way of written content so people can connect to it better. Youve got a great deal of text for only having one or two graphics. Maybe you could space it out better?

  6. PLLLLLEASE DO NOT CHANGE YOUTUBE!!! I LOVE THE OLD VERSION!!!!! THE NEW VERSION SUCKS!!!!!!!!! I HATE THE NEW VERSION!!!! YOUTBE SHOULD STOP BEING SELFISH AND THINK ABOUT US USERS NOT WHAT THEY THINK ITS CUTE OR NICE!!!! 10 THUMBS DOWN ON NEW VERSION!!!!

  7. I managed to get a shot at it last night and I have mixed feelings. Seeing my poor rabbit get beaten up by a nasty snake was painful. Okay it wasn't the best choice of pet but since my main collection disappeared in the last patch, I was a bit limited to what my panda monk could grab.It could be addictive and I definitely want to grab some of the wild pets but I'm not convinced it will be something I do regularly.

  8. a diferença está nas capacidades das ruas: umas são principais e possuem capcidades maios elevadas de suportar transito de carros e de pessoas. outras são secundárias; de resto, sãoeminentemente habitacionais. (conheço a zona muito bem, a comparação proposta não faz sentido)

  9. I’m looking forward to this series… there are loads of so called viral videos that I am interested in, and I’d love to hear how they managed to get 1million views, and how they got the idea and whether they knew it would be so successful.

  10. Vivement une législation pour interdire aux footix de parler de foot, ça en devient éreintant.Domenech joue en 4-2-3-1 ou en 4-4-2. Il n’a pas une équipe spécialement défensive et repliée sur elle même, par contre il joue typiquement contre des équipes de ce genre (Roumanie, Lituanie, Suisse, Ecosse). Le-sélectionneur-de-merde-d’une-équipe-de-bouffons a galéré contre la Suisse en 2006. 1 semaine après il explosait l’Espââââgne 3-1.

  11. Sliced Cheese $2 each -$1/3 Kraft Cheese, any – 01-15-12 SS or use .50/2 Kraft Natural Shredded Cheese, Any 8 Oz. Or Larger – Coousnp.com – Use Zip Code 50702 =$1.50 each – $1.67 each wyb 3 after

  12. I've never heard of those, but from this review, I'm going to have to try them! My plans for this weekend are to stay WARM! When the "feels like" temperature is 0*F, I'll be staying inside, nice and warm. Have a wonderful and relaxing weekend!

  13. Skandalös ist wohl eher die NPD und die SED in einen Topf zu werfen. Bei aller Kritik. Alleine was z.B. den Schießebefehl angeht, so hat Frau Merkel inzwischen teilweise in einer Woche mehr Tote an den EU-Außengrenzen mitzuverantworten als in der gesamten DDR-Geschichte durch Schüsse gestorben sind. Achtung muß erst verdient werden. Wer Menschen nach Rassen einteilt hat sicher nicht unsere Achtung verdient.

Leave a Reply

Your email address will not be published. Required fields are marked *