search

sspenst / thinky.gg

A platform dedicated to high-quality puzzle games
https://thinky.gg
GNU General Public License v3.0
17 stars 7 forks source link

Arrow/triangle indicators on restricted movable #548

Open k2xl opened 2 years ago

k2xl commented 2 years ago

Every new person i show the game to is confused about which direction a block can be pushed. Adding small arrows or triangles for default theme could help

jeetee commented 2 years ago

Posting some possible crude attempts towards more directional blocks here as a possible approach and to have it documented:

Option 1: plain arrows

image Seems to work out doable on PC screens, might become to small on mobile. Used variable values for styling:

--arrow-head-size: calc(100% / 6);
--arrow-line-size: calc(var(--arrow-head-size)/4);
--arrow-padding: calc(var(--arrow-head-size)/4*3);

image image image

Option 2: Fat arrows, stemless

image Seems to hold better on smaller screens (although also seems slight displaced when going small enough?) Threeways look a bit "spaceshippy" (hi19) and omnidirectionals are closer to mosaic tiles which doesn't work so well on PP1 style levels.

--arrow-head-size: calc(100% / 2.75);
--arrow-line-size: 0px;
--arrow-padding: calc(var(--arrow-head-size)/4);

image image image

psychopath-custom-arrow-movable.css.txt

Option 3: ...

Since this approach uses the clip-path property we can basically use any thinkable singledraw pathfilled shape. I've now used a polygon for ease of arrow-creation, but we could just as well use the more generic path() syntax as well. I do propose keeping at least all tiles with the same directioncount on the same layout, but just rotate them.