Awaken mural puzzle demo (570.4 KB)

Itch link if you would like to play it in browser as opposed to downloading it:

I’ve put together a small demo of a type of puzzle that will be in the game that I’m creating named Awaken.

The puzzles in the demo are tile based, you need to drag the correct tiles into the correct slots based on the icons on them. In future I will also use the same system for puzzles with other visual data like (for a very basic example) matching a tile with a dog on it to a slot with a wolf on it.

I hope you enjoy it despite it being somewhat short. If you find any bugs don’t hesitate to tell me about them so I can patch them up!


Reminds me of The Witness (I assume you’ve played it too). It’s neat to see rules building upon rules.

The following are personal UI design preferences and not actual bugs:

  1. The first thing that I noticed was the custom cursor icons you have are using the upper left corner of the image as the mouse position. This means that the icon changes when it doesn’t even look like your cursor is over the target. It is especially confusing to click on the smaller text links in the game.
  • I recommend putting a small wedge/arrow shape in the upper left corner of your cursor images to help draw the player’s eye to where the cursor is actually pointing to. The alternative is to somehow offset the cursor icons so that they are centered over the mouse position.

I like how you have to collect the tiles and then use them in the puzzles. I can imagine some tiles being hidden in devious places.

  1. Another thing I noticed is that after you have solved a puzzle, the solved puzzle itself is draggable. I would remove that ability unless dragging a solved puzzle to a new location is a part of future game play.

  2. Lastly, because clicking and dragging is a mechanic, the game is more prone to people mis-clicking and selecting (highlighting) puzzle parts.

    I suggest using this in your Style Sheet… * { user-select: none; } …if you don’t require selecting text and such.

All in all, the puzzle code seems to work well. I tested it in Firefox on Win10. I’ll put it through the paces later and see if I can break it! :wink:

Thanks for your input! Yes I have played The Witness and it was a big inspiration for certain.

Very good note on the cursor thing, I had noticed there was a pixel offset parameter for the cursor property in CSS, but I think I like the idea of adding a wedge in the corner much more.

Funnily enough I don’t actually know how to disable basic images as draggables, but I’m sure a simple google search can fix that.

Thank you very much for that CSS line, I didn’t even think it was possible to turn off selecting elements!

I’m pretty glad that the code works well, I hadn’t noticed any bugs of course but I was slightly worried that it was somehow riddled with bugs I didn’t catch. :laughing:

And seriously, thank you so much for all your help in getting this to be functional and fun to interact with and play. I genuinely could not have done it without your help, so I really appreciate it, and I hope you’ll like the full game when it comes out!

Speaking of which I don’t have much of a good estimate for a release date, but maybe in about 3-4 months it’ll be complete if I don’t keep adding stuff to it. :wink:

1 Like

The CSS code I shared might actually disable everything from being dragged that doesn’t have your drag code. If it doesn’t, the HTML attribute of draggable="false" should work. (570.4 KB)

I came up with a slightly less elegant solution, but it works pretty concretely.
I just used this code and tagged the images (or other elements) i didn’t want dragged with class="nodrag".

.nodrag {
  pointer-events: none;

That and the other suggestions are implemented in this version and I’ll update the initial link as well.

1 Like

Alright. I tried to crash it. I dragged things where they didn’t belong, where they shouldn’t belong and where they didn’t even want to be and it still worked. I think it’s pretty solid.
I tested it the second time in Chrome on Win10.

I have to laugh because I didn’t see the secret the first time and then it really made me want to understand the rules you’ve laid out. After solving the secret one, I can honestly say that if you keep to what you’re doing, it’ll be a very solid puzzle game.

The aha moments are very rewarding in themselves, but if you can pull off a compelling story/discovery motivation (on top of the puzzle aha moments), I think you’ll have a winner on your hands.

Also, like how The Witness used alternate physical viewing perspectives to solve puzzles, I wonder what interesting perspectives/manipulations could be created in IF. Like, what could one do to alter the puzzle to help solve it outside of dragging pieces around. Hmmm… good luck on that! :wink:

1 Like

Oh, I noticed that the cursor changes when dragging a tile.

Add this to your CSS to keep the hand cursor showing or change it how you see fit:

img.draggable {
  cursor:url(Images/Common/basecursor.png), auto;
1 Like

Good to see that even when someone tries to break it it holds up. :sunglasses:

I’m really glad you’ve enjoyed the little peek into my project, there’s a whole lot that’s planned for it beyond, around, and interwoven through the murals so I feel confident that the discovery aspect will be as compelling as the murals are.

As for the story, I’m really excited to develop it through what I can tell the player with the environment, as well as some hidden things that are a bit more plain-text. (kind of like the hidden lore in Hollow Knight if you’ve played it!)

There is a lot that I’ve been working on as far as connecting the environment to the puzzles, and while I don’t want to spoil anything, I will say that I’m taking a lot of cues from how The Witness uses the environment to inform the player, as well as how the environment can “physically” affect puzzles.

All in all I am extremely excited to keep working on it and I know that passion will show in the final project, and if I can apply even a fraction of what I’ve learned from the great puzzle games I’ve played, it’s gonna be great.

(Thank you so much for the cursor thing by the way!)

1 Like