Website powered by

UI Logbook with animations for puzzle game

This logbook was made for a third person puzzle game called Aria.
Aria was made in the game engine Unity as a group project for a University course.

I created the logbook with the goal to assist players with remembering how to read the games different symbols. Pages gradually get added after players have solve what the symbols mean. I did not design the appearance or meaning of the symbols and operands! In total the final logbook has over 60 pages.

Ingame screenshot of logbook in Unity. It shows the symbol in question and the direction + steps required for it.

Ingame screenshot of logbook in Unity. It shows the symbol in question and the direction + steps required for it.

Ingame screenshot of logbook, start page containing the Table of Contents.

Ingame screenshot of logbook, start page containing the Table of Contents.

Ingame screenshots of the symbols tab page.

Ingame screenshots of the symbols tab page.

Ingame screenshot of logbook when only half a page has been unlocked.

Ingame screenshot of logbook when only half a page has been unlocked.

Operands tab page.

Operands tab page.

Rotate operand on basic directions.

Rotate operand on basic directions.

Double operand on basic directions.

Double operand on basic directions.

Gif of the logbooks opening and close animation.

Gif of the logbooks opening and close animation.

Notification gif that the logbooks been updated.

Notification gif that the logbooks been updated.

Gif of the first attempt at animating the page turning.

Gif of the first attempt at animating the page turning.

Gif of the second attempt. Looks better but I couldn't manage to make it works with the symbols still on the page so it got scrapped in the final game.

Gif of the second attempt. Looks better but I couldn't manage to make it works with the symbols still on the page so it got scrapped in the final game.

First iteration of the logbook.

First iteration of the logbook.

Final image used for the logbook.

Final image used for the logbook.

Final image used for the outside of the logbook. Since it's only seen very briefly in the opening and close animation I choose to keep it quite simple.

Final image used for the outside of the logbook. Since it's only seen very briefly in the opening and close animation I choose to keep it quite simple.