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

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

  14. Dude,if nothing else, I tip my hat to you for putting some action to your dream. I can’t seem to be willing to put the time in or have the gumption to put forth the effort to achieve the dream. So, do what you do, bro. If it makes you happy, and isn’t harming anyone, damn what anybody else thinks, ya know? Keep on truckin’. I enjoyed (for a moment) the post you had a while back where we took turns writing a team-effort novel. Unfortunately, immaturity and the lack of talent of a few, doomed that project. If you ever want to collaborate on something, just holla TB!~!!

  15. Jen, you don't need to worry about anything else except your family. My thoughts and prayers are with you, and when you're ready to return to the "blogosphere," we will all be here. Good luck to you and your precious family.

  16. I have noticed you don’t monetize your website, don’t
    waste your traffic, you can earn extra bucks every month because you’ve got hi quality content.

    If you want to know how to make extra money,
    search for: best adsense alternative Dracko’s tricks

  17. Приветик! Сразу оговорюсь, возможно я, опубликовала тему не совсем не по теме ресурса, но всеже, знающие люди должны быть.
    Не так давно был спор с близкой подругой, что смогу сделать ресурс по типу монетизация сайтов https://seorunet.com/
    и за полгода вывести его в топ поисковика и получать на него трафик не ниже 500 посетителей. К моему сожалению, проблема в том, что я не понимаю в этом деле, а спор проигрывать нельзя. Поэтому к вам просьба, для тех, кто понимает, сколько может стоить такой сайт под ключ с наполнением, который написан выше.
    А главное, за какую цену вы могли взяться и сделать такой сайт? Много средств у меня к сожалению нет, но, какую-то сумму заплатить смогу.
    Если вы можете взяться за это дело, пишите в ПМ оповещения читаю
    Если я вам не ответила, то,к сожалению цена не устраивает.
    Модераторы, если разделом ошиблась, перенесите где ей место или в раздел свободного общения, заранее спасибо.

  18. Hello,I read your new stuff named “Editor | MightyFingers | HTML5 Game Editor | Web Based | MightyFingers” regularly.Your humoristic style is awesome, keep doing what you’re doing! And you can look our website about proxy list.

  19. Hello, I am a paying user and have been for over a year but have a security concern. The lack of SSL certificate scares me as it basically means an adversary can sniff my credentials on the wire. Can you implement SSL please?

  20. I have noticed you don’t monetize mightyfingers.com, don’t waste your traffic,
    you can earn extra cash every month with new monetization method.
    This is the best adsense alternative for any type of website
    (they approve all sites), for more details simply
    search in gooogle: murgrabia’s tools

  21. Intercontinental: Daniel Bryan (c) vs Bad Nouvelles Barrett: Malheureusement, ce match pour le titre est dans l’air en raison de Bryan recevoir tests médicaux depuis le récente tournée européenne.

  22. Thanks for sharing for this info, it may be useful for somebody
    to use it to writing some article, for instance. I particularly want to note your ability to express data in an accessible manner.
    As a popular-science blogger, I want to be certain of every
    element of my writing to satisfy inquiring heads
    with quality advice and keep their interest until the close of the
    article. You made me see it until the end

  23. The post reveals some burning questions and issues which ought to be
    discussed and clarified. Furthermore, it is vital to comprehend within the detail.
    In the post, one can easily locate something
    fundamental, remarkably for him, something which may be hugely helpful.

    I am thrilled with the information I have just obtained.
    Thanks a lot!

  24. Достаточно часто появляются обстоятельства, когда необходимо с минимальными затратами времени разрешить простую проблему или обрести полезные в данный момент знания. В интернете распространены разнообразные интернет-ресурсы с полезными советами. О таком сайте мы расскажем в этой статье.
    Семейный журнал – “Все вопросы и ответы” дает ответы на различные темы. Вот лишь некоторые из них.
    – Вопросы устройства на работу описывают: как правильно заполнять график отпусков, вжиться в новый коллектив или получить прибавку к зарплате и т.п.
    – Секреты женского великолепия – дают возможность почитать о вопросах выбора прически, длины и цвета волос. Получить информацию про известных красавиц в мировой истории, развитии крупных модных брендов и другие полезные советы.
    – Проблемы употребления вкусной, полезной еды и напитков – как быстро приготовить вкусный ужин из простых продуктов, список продуктов для улучшения зрения, искусство приготовления каш из тыквы.
    – Отношения в семье – важные советы про быструю уборку квартиры, выбор стиля в интерьере с практических позиций, принципы подготовки потолка к отделке и др.
    – Занимательные данные о садовых работах, починке машин, спортивных упражнениях – как выбрать хороший видеорегистратор, сроки посева различных растений и что помогают развить специальные виды спорта.
    Официальный сайт: приготовить вкусный недорогой ужин рецепты
    Смотрите страничку ресурса в сети и читайте интересные вам темы. Только интересная и выгодная информация.

Leave a Reply

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