2017년 5월 1일 월요일

Drag and Rearrange Tiles


Hey guys, appreciate if anyone can help point me in the right direction. I'm creating an app where there it would ask the user to rearrange the tiles to make a correct sentence (picture below). What I'm trying to achieve is when you move a tile to another spot, that tile that is moved into should switch over with the tile that is being moved. For example, if I move "Those" to "my", they should both switch positions. I'm facing 2 problems with the way I have done it:
1) When I drag a tile past other tiles, it also triggers the "Dragged" command. Only 1 tile at a time should be dragged.
2) The switching of positions in my code is positioned by the dragged tile's starting X position. When I move pass more than 1 tile, it moves all the tiles to that same position.

I'm just stuck here and hope to get some help.


--
I am working on a solution for you but please be patient.
This may take a day or two.

--
Thank you, Scott. Really appreciate it and no worries on the timing.

--

Just to let you know that I haven't forgotten about your project, here is what I have so far.
It is taking longer than expected as I have other irons in the fire, but I will continue to whittle away at it when time permits.
In the mean time you may be able to take it further yourself.

How it works so far:

A text file stored in the Media folder contains ten sentence words in the correct order:

the storm rocked the ship
the artist worked at his masterpiece
dad was offered a free gift by the firm
the cricketers began their piercing calls
the newspaper arrived early
he wore a hat of coconut fiber
coffee is a very popular beverage
the torch lit the cave walls
the storm damaged the shed
James sat at the back of the bus

This is read into a list using the File component.

Each sentence in that list is split into the separate words with the Text split at spaces block.

Each group of words is randomized and each sentence is randomized so every time the app is run the sentences will display in different orders and the words will be scrambled differently as well.

A small canvas is used to DrawText each word then save that image with the Canvas.SaveAs block.
The paths to those Picture files are saved in a list.
A second canvas then stages ImageSprites using those Pictures to display each word.

Right now only one random sentence is selected from the list for testing.
Later the intent was to display as many sentences as you wish from the attached CSV file.

The words can be dragged currently but they don't snap into position yet and the words underneath them don't move out of the way.
Sprite cannibalism is avoided.
The currently dragged sprite's z property is set higher than the rest so it is always on top.

To Do:

Implement snap-to-grid to force the words to drop in a predictable spot.
Move other sprites out of the way when dropping.
Test if the words are in the correct order.
?

This is an interesting project, and more complex then I initially thought, so it may take some time to sort out the rest.
One interesting development was a list Randomize procedure with result that was created for this project..
It accepts any list and returns a randomized copy.
It could be used for many other applications as well.

aia project attached.


--
Wow Scott, you are really good at this and an inspiration as well. While I'm not so good at this, I'm just going through what you've done and figuring it out while learning at the same time. 

Thank you so much and please bear with me as I take some time to absorb this and might have some follow up noob-ish questions.

--
OK. I have backtracked a bit to eliminate the list of sentence words to keep things simpler.
This example project accepts a single sentence stored as comma-separated text in the global SentenceWords variable:

You can replace these words with any other words for testing, but watch that the words are not too long as they may get cut off on the edges.
You can include up to ten words for a sentence.
Later you may wish to have more than one sentence (group of words) for game play.

The words are drawn onto a Canvas with DrawText, then saved with Canvas SaveAs as Word1.png, Word2.png, ...
Depending on how many words are in the sentence, a list of ImageSprites will have their Pictures set to the saved images.
Those ImageSprites are then displayed on another Canvas in random order.
The user drags the ImageSprites into the correct order.
If they succeed, a notifier displays.



--
Cool. Thanks again for this, Scott. This is great!

If I were to add some spacing between the words, would it involve a lot of changes in the block code?

--
One way to do that would be to add, say 5 or 10 pixels to the width of the word sprites Pictures.:

Before:
After:
Or you might just reduce the FontSize for the WordCanvas which will allow longer words.

--

댓글 없음:

댓글 쓰기