shmikucis 31 Report post Posted May 9, 2014 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=7dk2naCCePcHere 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 objectzoom in / outsound managementtile map supportimport from tiled editorexport to tiled editorsprite animation editortween editorsource editoruser and multi user supportversion control for the projects 5 haden, Dread Knight, kass and 2 others reacted to this Share this post Link to post Share on other sites
rich 2,575 Report post Posted May 9, 2014 Wow! Going to have a play with this today Share this post Link to post Share on other sites
Luis Felipe 17 Report post Posted May 9, 2014 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
rich 2,575 Report post Posted May 9, 2014 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 2 stauzs and Rudrabhoj Bhati reacted to this Share this post Link to post Share on other sites
stauzs 26 Report post Posted May 9, 2014 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
gaelbeltran 8 Report post Posted May 9, 2014 I vote for texture atlas integration, but that's not on the list Share this post Link to post Share on other sites
Mike 56 Report post Posted May 9, 2014 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
stauzs 26 Report post Posted May 12, 2014 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
CrazySam 5 Report post Posted May 13, 2014 I vote for github integration! 1 Salvatore reacted to this Share this post Link to post Share on other sites
Salvatore 1 Report post Posted May 15, 2014 Hey, you guys have to putt the size of the sprite in the object settings!!! \o Share this post Link to post Share on other sites
Cirta Games 0 Report post Posted May 16, 2014 That's a very ambitious and useful project that will help much developers. Keep up the good work ! Share this post Link to post Share on other sites
Neoprofessor 17 Report post Posted May 17, 2014 Wow. Very cool. I think this editor might need a forum category of it's own. Share this post Link to post Share on other sites
neon 2 Report post Posted May 18, 2014 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
shmikucis 31 Report post Posted May 19, 2014 > SalvatoreOK, 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? > NeoprofessorActually 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? > neonGreat, I would like to see your work. 1 Salvatore reacted to this Share this post Link to post Share on other sites
neon 2 Report post Posted May 19, 2014 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
rich 2,575 Report post Posted May 19, 2014 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
Salvatore 1 Report post Posted May 19, 2014 Will be a good one, case we need to resize the sprite. Share this post Link to post Share on other sites
haden 48 Report post Posted May 22, 2014 @shmikucis, this is really impressive. I'm curious, what are you using to code the UI elements, JQuery UI ? Share this post Link to post Share on other sites
stauzs 26 Report post Posted May 23, 2014 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. Share this post Link to post Share on other sites
stauzs 26 Report post Posted May 23, 2014 @hadenBefore 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. 1 haden reacted to this Share this post Link to post Share on other sites
Mike 56 Report post Posted May 23, 2014 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
stauzs 26 Report post Posted May 26, 2014 @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. 1 Mike reacted to this Share this post Link to post Share on other sites
haden 48 Report post Posted May 26, 2014 @hadenBefore 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 Share this post Link to post Share on other sites
stauzs 26 Report post Posted May 28, 2014 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 1 Mike reacted to this Share this post Link to post Share on other sites
Kai 5 Report post Posted May 30, 2014 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