Phaser Scene Builder

[PhaserEditor2D]

Updated August 31, 2016

A new version of Phaser Editor is available! Take a look!

---

Hi,

I invite you to check this PREVIEW video about Canvas, the Phaser Editor scene builder that is in development.

In the video we show how you can create the scene objects by dragging the assets shown in the Assets explorer, the texture atlas previews and the sprite-sheet previews (it was funny to discover that a texture atlas could be a nice "sprite palette").

We think this is a natural behavior that will increase your productivity since it uses the same elements you are familiar with.

We want to build an editor from the bottom to the top:

• We implemented a powerful asset manager, based on the Phaser Asset Pack format. 
• Asset packers like the texture atlas and the audio sprites generators.  
• A Preview window that is able to visualize those assets in a way that helps the user to get a quick feedback of the kind of objects she is using in her game.
• A JavaScript editor that understands the assets of your game, and helps the user to write the asset keys and provides popup windows with useful information and visual (and echoing) feedback.
• And now an scene builder that takes advantage of the asset pack and the Preview windows.
• When the scene builder gets ready and stable, then we will focus on the objects of the scene, and provide more specialized editors for aspects like tweens, sprite-sheet animations, physics and emitters, to mention some of them. 

Our gold rule: stick to vanilla Phaser concepts, models and formats, we do not want the user to learn new stuff, we want to reuse what he already knows about Phaser, the same names, the same structures, and we want he to learn something that applies even outside our editor, because it is just Phaser after all.

Well.. it was a long talk :-) I let you with the video. Any idea about the scene builder or whatever other thing, is more than welcome.

 

Updated June 25, 2016

Video updated with the last version of the scene editor.

 

 

 

[Umz]

That looks like a really useful program.

Can you dictate where the code generates to? And is there a code viewer too? As in, can you write the code and see the results as well as dragging it etc.

[PhaserEditor2D]

Hi @Umz

Thanks for your comment, in the video it only shows the Canvas editor, but you can arrange your editors and views and create custom layouts, for example, to show the JavaScript editor together with the Canvas editor, like in the attached image.

Yet the code generator is not done, but you will be able to see it, of course, just opening the source file in the built-in JavaScript editor. Maybe I can do like in other Eclipse-based builders, a multi-part editor with a tab for the scene and other tab for the generated code.

>  Can you dictate where the code generates to?

Maybe, for now I was thinking to generate in the same folder of the canvas file, do you think it will be nice to generate it in other place? In any case, in always can create virtual folders, virtual folders are soft links to external folders, so you can point it to the location you like, and even you can edit the source out of Eclipse (like we explain in this post).

>  As in, can you write the code and see the results as well as dragging it etc

Do you mean parse your code and update the scene? I don't think so :), it is a too hard task, we are just going to implement one direction, you change the scene and the code is re-generated.

 

[samriggs]

Alright Arian your doing it

I was hoping you would add this into the editor, looking good so far and will make life a lot easier for layouts.

I'll keep my eyes open for this update to play with, I'm busy making another mdm, I'll try one using this add on toy once complete before playing with it on a game to get the hang of it.

Keep up the great work.

Sam

[stamas47]

This looks pretty awesome. If you added TypeScript support and automatic compiling I would be hooked!

[PhaserEditor2D]

Hi @samriggs

We are working hard to include a beta version of Canvas in the next release of Phaser Editor

We are trying to keep it simple but yet powerful enough to fulfill many use-cases. I think for MDM logins will be great! Actually, as you can see in the previous screenshot , in my tests I try to reproduce your Area 51 ;-)

 

Hi @stamas47

Yes, typescript is in our plan, it is high priority for us. We are following the progress of this project: https://github.com/angelozerr/typescript.java

I think in few months it will be included in Phaser Editor.

[PhaserEditor2D]

Another screenshot, with a landscape based on tile sprites.

What is already implemented?

- Drop assets from the Assets explorer and preview windows.

- Create sprites from image assets.

- Create sprites from atlas assets.

- Create sprites from sprite-sheets assets.

- Morph sprites into tile sprites.

- Many basic properties implemented (x, y, angle, scale, pivot, anchor, tint, frame, tileScale, tilePosition, width, height).

- Make/break groups.

- Move objects to groups.

- Alignments

- Close a group (to manipulate it as a sprite). Trim a group (remove white spaces from groups). Disable picking on a group or sprite, to make it "mouse transparent", very useful when some parts of the scenes are complete and you do not want to mess it.

- Zoom and pan.

- Select all objects inside a marked area.

 

 

What's missing for the beta version? Lot of stuff  but these are the main missing pieces:

 

- All related to buttons.

- Copy/paste.

- Undo/Redo.

- General scene settings (to change background color, world size, etc...).

- Code generation.

 

(Image: landscape based in tile sprites)

 

 

 

[WombatTurkey]

Could this be possibly integrated into / maybe some type of official "Lazer Visual Editor" aswell? This is pretty amazing.

[PhaserEditor2D]

11 hours ago, WombatTurkey said:

Could this be possibly integrated into / maybe some type of official "Lazer Visual Editor" aswell? This is pretty amazing.

@WombatTurkey It would be great for us but I don't think it is going to happen soon  , there could be many reasons but the most important (I think) is that Phaser/Lazer are so simple to use that it really don't need an IDE. Just take a look to the examples of Interphase, those can be coded in any regular editor, and @photonstorm had mentioned many times that Sublime Text is a great option and the one he uses.

Sure, I think for lot of people an IDE like Phaser Editor is a boost, actually, I hope some day to see Rich using Phaser Editor in his client work (hehe).

However, there is other option that for me is more natural and is the one I have as goal: make Phaser Editor a commercial success and support Lazer on pantreon  I think from a patron position (pledging $100/m or $250/m) we can get some support from PhotonStorm and could be a first step in the way to get an official editor. But yet this is not going to happen in the near future. In the meantime, what we can do is to continue working hard, in any case the product is there, "official" or not.

[WombatTurkey]

2 hours ago, Arian Fornaris said:

@WombatTurkey It would be great for us but I don't think it is going to happen soon  , there could be many reasons but the most important (I think) is that Phaser/Lazer are so simple to use that it really don't need an IDE. Just take a look to the examples of Interphase, those can be coded in any regular editor, and @photonstorm had mentioned many times that Sublime Text is a great option and the one he uses.

Sure, I think for lot of people an IDE like Phaser Editor is a boost, actually, I hope some day to see Rich using Phaser Editor in his client work (hehe).

However, there is other option that for me is more natural and is the one I have as goal: make Phaser Editor a commercial success and support Lazer on pantreon  I think from a patron position (pledging $100/m or $250/m) we can get some support from PhotonStorm and could be a first step in the way to get an official editor. But yet this is not going to happen in the near future. In the meantime, what we can do is to continue working hard, in any case the product is there, "official" or not.

Ohh, I forgot it was a commercial project My bad! Yeah, that makes sense. I guess we can just purchase it separately and use it on Phaser/Lazer.  

I made a suggestion several months back of some type of Official Lazer Editor similar to ImpactJS's Weiltmeister. Maybe as a 3rd party plugin, or whatever. But then there is that argument of Phaser/Lazer is so easy to use, but I still love the editors.  

[PhaserEditor2D]

On 6/4/2016 at 1:06 PM, WombatTurkey said:

Ohh, I forgot it was a commercial project My bad! Yeah, that makes sense. I guess we can just purchase it separately and use it on Phaser/Lazer.  

I made a suggestion several months back of some type of Official Lazer Editor similar to ImpactJS's Weiltmeister. Maybe as a 3rd party plugin, or whatever. But then there is that argument of Phaser/Lazer is so easy to use, but I still love the editors.  

Yes I saw your post

[PhaserEditor2D]

This is another screenshot to show a nice feature: properties help.

Following the same line of the asset pack editor, here we show the help of the properties of the objects. This help is exactly the same jsdoc of the Phaser API.

For example in the screenshot it puts the mouse over the `frameName` property, then it shows a tool-tip with the image of the frame but also with the doc of the `Phaser.Sprite.frameName` property.

This is good not only because it assists the developer, else because in this way the developer gets more familiar with the Phaser API.

In Phaser Editor we parse the Phaser source and create an index of the documentation. This index is used in many places: the JavaScript editor, the Chains view, the Asset Pack editor and now in Canvas. This mean, we connect our tools to the real Phaser API and they are always synchronized with the last Phaser release.

P.S: Lately the Phaser team is releasing a new version at 60 FPS , so it is hard for us to keep the editor updated... but good news, for the next release we had implemented an update mechanism to get always the last Phaser version with a minimum of effort.

(Image: help of the sprite properties)

 

[samriggs]

Looks good Arian I emailed you the fix for the linux java version that had the outdated standalone version, just drop it into the PhaserEditor/jre and replace the old bin folder with contents with the one I sent you, it's version 1.8 to get that one part that requires that version to work and load properly.

I loaded your sample and it looks fantastic, got to create a project to play with now

Thanks for this it's a huge bonus

Sam

[PhaserEditor2D]

17 hours ago, samriggs said:

Looks good Arian I emailed you the fix for the linux java version that had the outdated standalone version, just drop it into the PhaserEditor/jre and replace the old bin folder with contents with the one I sent you, it's version 1.8 to get that one part that requires that version to work and load properly.

I loaded your sample and it looks fantastic, got to create a project to play with now

Thanks for this it's a huge bonus

Sam

Hi Sam,

Sorry the late answer, in the weekend I am offline.

Thanks so much for your feedback!!!!

The problem was that I forgotten to set execution permission to `jre/bin/java`, in the `SetExcecutionPermissions.sh` script.

For that reason the editor was not able to run the embedded Java, later you replaced the files for those with permission, for that reason worked.

I am uploading a new zip with the right permissions in the script.

Thanks again!!

[samriggs]

Thanks Arian

It's nice to take a break on weekends

I downloaded the new version and tested it without changing the java version to 1.8 like before and it work nicely.

Just thought I'd let you know in case you didn't have linux to play with (I take it you do but just in case)

I might make a MDM theme just to play around with the scene builder soon as I get an idea to put together.

I'll email you the link once I get it done.

All works well now.

Take care

Sam

[PhaserEditor2D]

Thanks @samriggs,

I test things on VM with Ubuntu 14.04 Gnome

But next time I should take more care and test on a fresh installation.