How to do a puzzle in axure?

puzzle.rp (1.8 MB)
Hi everyone,

Does anyone know how to create a puzzle in Axure? I’ve tried using drag and drop in the attached file, but it’s not working as expected. Can anyone help me or does anyone have a template I could use?

Thank you!

why not use repeater?

I’ve been doing some research and found information on using repeaters to arrange 3 objects horizontally and vertically, but do you know of a way to do it in a 3x3 grid like a board?Horizontal_DragandDrop_reorder 2.rp (131.1 KB)

I’ve been researching about repeaters, but I’m not quite sure how to use them.

I don’t have a full answer for this but I got part of the way there with the “reorderable repeater.rp” file found in this thread about a similarish question: Drag and Drop Reorderable Repeater

I got as far as turning it into a 3x3 repeater (using the wrap option in the style panel) and getting drag and drop started (i modified the Dragged Interaction on the dynamic panel in the repeater. It gets part of the way there.

However, where I stopped was getting the reordering to work, it seems to be based upon the “dropIndex” variable which is set inside the Dragged Interaction on the dyn panel in the repeater, the value of it is dependent on where your mouse cursor is pointing, but I think you’ll need to update to work horizontally as well as vertically.

Random ideas that might turn out to be wrong:

  • Maybe you need to is a dropIndexX that is the same as dropIndex except the math is based around Cursor.y
  • Maybe you instead update dropIndex to track the row # and have another variable to track the column # to know where to re-sort the tile.

Curious to see where you end up with this, it’s definitely a tricky one. Is this a requirement to demo inside Axure or are you just challenging yourself to come up with a solution in Axure? I ask because it may prove to be easier and/or faster to mock this up inside a 3rd party tool (or like a slider puzzle js library) and use Inline Frame to embed it within your prototype.

Edit: There might also be something worth looking into in this thread: Snapping DPs to grid on drop drag

Why are you using Axure to create a game?
Axure is a powerful tool that can help you to build prototypes but at this point you are building a game.
You should use an engine that can render games and where you can code your logic like Netbeans, Unity, Godot, or whatever you like.

That’s a LOT of power and unnecessary learning just to slide a couple boxes around and I say that as a Unity developer (well a hobbyist dev at least).

Well if he does only mess with UI it isn’t that hard.
Nowadays whilst the Unity Engine has lost a lot of points (runtime fee, employees fired, community projects deleted, etc.) the Unity Asset Store actually got really good. You can get a visual scripting tool really easily.

I agree, Unity is really good. But it just comes with a hefty learning curve even with a visual scripting tool (each of which have their own learning curve). It’s a crazy over the top suggestion in order to demo a tile puzzle.

True, I think I forgot how much time I spent learning how to make that GetComponent<Image>() work correctly. If he can get it done with Axure is definitely less time consuming.

1 Like

My professor ask me do to a app using axure for kids, and he has given me a bad grade because he said that it’s very simple and it needs to be more complex and i have to use more tools from axure

What might be an easier to implement but still interactive thing might be a “match the correct answer to the correct question” game. Drag and drop a list of answers until they match the order of the questions. Then you can still demo drag and drop but you don’t have to worry about dragging and dropping in two dimensions.