Rendering to multiple locations in a page

[Pinkishu]

So I want to make a Map/Level Editor using Phaser.

 

Since Phaser itself doesn't seem to offer much in the ways of UI and I suppose it would be the best to use the normal browser elements since the users of the browser are used to them, I'd like to use such html elements for the interface.

 

So far no issue, I can just draw the level itself using the canvas created by Phaser.Game.. however, I also need another thing to choose the tiles to place, which should ideally be in its own little frame.

 

Bit like in Tiled where you see the level on the left and the tile selection in the bottom right: http://a.fsdn.com/con/app/proj/tiled/screenshots/319115.jpg (if anyone doesn't know Tiled ^^ even though its supported by Phaser)

But no clue how I'd do that since iirc you can't have 2 Phaser.Game in a single page and i'd have to communicate between the 2 then...

 

What would be a good approach to rendering to 2 locations like that?

[InsaneHero]

You could either roll your own in-Phaser scrolling ListView component and allow the user to drag it out of the way of whatever is being worked on, or try a UI component library like jQuery (there are a lot to choose from but that's the most famous I think) which should allow you to use DOM elements above phaser and still communicate to the game object from them.

[sanojian]

I accomplished this by having a function that I call each time I want to move the camera, and then moving my ui components relative to the new camera position inside that function.

 

For example, here I have a minimap that stays in the upper right-hand corner of the display window when the map is dragged.

moveCamera: function(x, y) {	window.gameBoard.camera.x = x;	window.gameBoard.camera.y = y;	window.gameBoard.miniMap.position.x = window.gameBoard.camera.x + window.gameBoard.width - window.gameBoard.miniMap.width;	window.gameBoard.miniMap.position.y = window.gameBoard.camera.y;}

Pro tip: it helps if you keep all IO handling in your "update()" function instead of using mouse/keyboard events when moving the camera.  That way your UI will not shake/bobble around when you move the camera because it is inside the render loop.

 

[InsaneHero]

Oh, if what you wanted to do was hold the UI component still, Sprite has a "fixedToCamera" property.  Set it true and the Sprite won't move when the camera does.

[sanojian]

Oh, if what you wanted to do was hold the UI component still, Sprite has a "fixedToCamera" property.  Set it true and the Sprite won't move when the camera does.

 

Oh very cool.  I didn't know that existed.  This is the correct answer.

[Pinkishu]

Seems I'm bad at explaining ^^" Or bad at understanding. My issue is that in the picture I linked, I need to

 

1) render the level that is being worked on

2) render the tileset, so people can select tiles to put onto the level

 

The level should be in its own scrolling DOM element, and the tileset in another scrolling DOM element. I have no clue how I'd let Phaser render to both though :/

Or what other options I have~ I suppose you suggested having a big phaser game canvas in the background, putting DOM elements on top of that and rendering according to their position and scrolling?

 

So:

[shmikucis]

It doesn't answer your question but why would you develop a new editor if you have open source project like MightyEditor? Improving and contributing would help much more than creating another editor from scratch.

 

Here is a github page: https://github.com/TheMightyFingers/mightyeditor

[Pinkishu]

It doesn't answer your question but why would you develop a new editor if you have open source project like MightyEditor? Improving and contributing would help much more than creating another editor from scratch.

 

Here is a github page: https://github.com/TheMightyFingers/mightyeditor

 

Many reasons, it has too many options, many of which aren't usable for what I need it, just needing a simple tile editor~ Also the editor should be similar to design and functionality of an already existing application (which is getting old and could use many improvements though), since it is for an existing game and requires specific features.

And it needs to save into a specific format for that game.

[Sebi]

MightyEditor sure is not an alternative for all people.

@Pinkishu

I would probably rely on DOM for that.

All you need to do is a CSS spritesheet for the DOM and an json file for Phaser. Both using the same texture.

In my Three.js mapeditor I looped over the available tiles, then displayed those as span tags with a click handler attached to them.

Then I had a variable:

var selectedTileId = null;

On click on the span tag, the id changed to the selected tile.

When drawing / clicking on the canvas, I just had to look up the content of that variable and use that for my tile drawing.

So really all you need is a variable that you overwrite on click on the html element.

[Pinkishu]

MightyEditor sure is not an alternative for all people.

@Pinkishu

I would probably rely on DOM for that.

All you need to do is a CSS spritesheet for the DOM and an json file for Phaser. Both using the same texture.

In my Three.js mapeditor I looped over the available tiles, then displayed those as span tags with a click handler attached to them.

Then I had a variable:

var selectedTileId = null;

On click on the span tag, the id changed to the selected tile.

When drawing / clicking on the canvas, I just had to look up the content of that variable and use that for my tile drawing.

So really all you need is a variable that you overwrite on click on the html element.

 

Hmm, well sounds laggy though with 4096 tiles? Plus i want to be able to drag to select multiple at once (with an overlay) and such xD

[Sebi]

Well, this is my old Three.js mapeditor: http://mokgames.com/3D/mapeditor/

The tiles in the menu on the left are just html span tags using a css spritesheet.

All you are looking for is a way to select tiles in a menu and to draw them to the canvas, no?

You don't actually need two stages for that, even tho you could do that.

It's entirely up to you to use html or canvas. Both is possible both requires some coding work.

[Pinkishu]

Yeah just not sure if creating 4096 span tags has performance drawbacks~

Ideally i'd just want to render to 2 surfaces D: Since that way you'd get the DOM scrolling + elements but able to use Phaser to draw the tiles

 

Seems it might be the best to just have 2 Phaser.Game objects :/ But feels like so much overhead

 

edit:

well seems with some hackery one can create a group, a stage, add the group to the stage, create a canvas, create a webglrenderer with that canvas, add the canvas to DOM, and do the update/render functions for those in the state~