Can phaser make grids that I can drag words on to? (like Scrabble)

[vornay]

Can Phaser support the creation of a screen where I have 3 palettes of “words”, and 3 grids of “paper”?

Words in the first palette would be dragged and placed within the first grid, words from the second palette would go on the second grid, and words from the third palette would go on the third grid.   Each palette/grid combo might be for a different language, for example the first palette/grid might be for English,  the second palette/grid for French, and the third for German.  The character set would be English, so I wouldn’t actually be using different locales.

The user would drag words from the palettes, and place them on the corresponding grids. The grids might be 80 characters across, and 5 characters tall.  The user would be able to place the words in to the grid, and move them around to wherever they wanted them in the grid.

I suspect the words in the palettes might be best done as sprites, rather than draggable text.  When placed on the grid paper, I would want them to “snap in to place” on the grid.  A five letter word would take up a row of 5 cells on the grid.  It would be like placing words down on to a Scrabble board.

The palettes might have so many words, they need to actually be scrollable listboxs, but I will deal with that later. The palettes would be on the left side of the screen, taking about 1/4 the screen-width, and their corresponding palettes would be to their right, taking up the other 3/4 of the screen width.

Is this possible to do? I've seen grids in Phaser apps, but there was only 1 on the screen at a time. I would need 3 different grids.

[TickleMeElmo]

Yes, it is tottally doable.

first you create the words as Phaser text, then you make them draggable(there's an built in method for that, google it).

then you add to the text on mouse up / on touch end listeners(also the old good google). if the cords are withing the grid you put the word there(maybe phaser also has some built in method for this. dont know, wouldn't hurt to use some simple maths instead though).

to position the text you just use text.width and text.height and some basic mathematics. Some polishing and Ba-dum-tss the game is ready

[vornay]

Ok, so the fundamental building block of this would be draggable text, rather than sprites.  I will pursue that.  For the grid, do I just draw it with lines, or try to construct it out of something?

[TickleMeElmo]

for start just make a simple image for the grid in paint or something.

[Ralph]

For an inventory grid I mad ein my game, to make draggable and snappable items around the grid, I setup a array with every position of the grid then whenever your "item has stopped moving" function is called from your drag listener on the sprite, check its position and see which point in the grid its closest to, and then set the sprites position to the grids position. So if you have tiles 80x80, and you drag it soemwhere, run a check over every position and see if the sprites position is within half of the tile's distance across (in this case 40) if it is for the x and y, then the player is trying to put the tile there. 

[symof]

I would make it as a tilemap then add the letter onto the tilemap with a background that has the grid image.

http://phaser.io/examples/v2/arcade-physics/gravity-and-drag

http://phaser.io/examples/v2/tilemaps/blank-tilemap

[vornay]

The blank-tilemap example looks like it is close to what I was imagining, at least in the way it moves.  I will research that example.