Joe Subbiani Exploring Code and Four Dimensions

4D Games: Dev-log Update 3

18 Dec 2022

MERRY CHRISTMAS!!!

Ever wondered what a 4D Christmas tree could look like?

christmas tree gif

As mentioned in Dev-Log Update 1, The original intention of this project was to take the experiments from my final year university dissertation and refine them. This week has been all about that!

I also have been experimenting with the user interface, and developing a tutorial for new players!

Matching Games

Last we saw the matching games, we had some very basic UI, and a ray marched shape. Since then I implemented several different 4D shapes and better rotation controls, as shown in Dev-Log Update 2.

Before this post I wanted to:

  • Have a working game loop for each game
    • Enable or disable the ability to rotate the shape depending on the game mode and difficulty setting.
    • Determine and save the accuracy of a users answer.
  • Implement saving and loading of the game data.
  • Display the saved data via graphs in the pregame menu.

The Game Loop

Each game has a different level of difficulty that can be specified in their pre-game menus. The level of difficulty controls the time, and what tools are available to the player. For example, in shape matching, where you have to guess the shape, on Easy, a player can rotate the shape, but on hard they cannot.

A lot of the UI below is still place holder, but you can get a general idea of how the game will play from these screenshots.

Shape Match

Here you can see the UI for shape matching game in its current state! You have a scrollable panel on the left to select the shape you believe is on screen. A slider on the right to scroll along the w axis, and of course the shape in the middle.

shape_match_ui

Rotation Match

The rotation match UI especially needs some refinement. The symbols on the left are designed to indicate the plane of rotation, where the colours Red, Green and Blue correspond to the X, Y and Z axes respectively, and white referring to the W axis.

pose_match_ui_gif

Pose Match

And here is the UI for the pose matching game! The slider will likely be removed in the future as it is currently not in use. The notable part of this though, is the randomly oriented shape in the top left that the player will is aiming for whilst rotating the big object in the middle.

pose_match_ui

Displaying Data

Before we get into the data displayed in the pre-game menus, I just want to note that the "Best Shape" and "Worst Shape" fields have very naive implementations producing outputs based on shapes that may not have been played yet.

Each game saves the players current and best "Streak". This streak is specific to the game mode. Each game also saves the amount of time taken to answer, which is displayed via a line graph. Each game also includes an "Accuracy graph" which is also specific to the game mode.

Shape Match

The shape matching game uses a simple "Win Loss" graph to show the last 10 guesses, and whether they were right or wrong. The streak is simply increased if you guessed correctly.

shape_match_results_page_gif

Rotation Match

The rotation matching game uses a bar graph populated by the similarity between the players answer and the correct answer. This is measured using a Jaccard Index. The streak is increased if you have a perfect answer. (A jaccard index of 1).

rotation_match_results_page

Pose Match

The pose matching game displays a bar graph of the angle between the randomly oriented shape, and the players shape they were controlling. The streak is incremented if the angle is below 15 degrees (highlighted by the green line)

pose_match_results_page

UI Improvements

Here are some screenshots of the UI I have been developing that blurs the background. I have also been experimenting with how to create a basic rim light effect to frame UI elements a bit more elegantly. I am still refining it all, and there is a lot to do, but I am pleased with the progress so far!

main_menu_blur_gif

settings_menu_ui_screenshot2

pose_match_ui_screenshot

A note for improvement: The rim lighting is currently angled from the top left, but the background is lit from the top middle. So I will likely experiment with changing the angle of the rim lighting in the near future.

Opening Tutorial

For my final year dissertation I threw together this video to teach people the basics on four dimensions, before participating in my experiment. The goal of the opening tutorial for 4D Games is to teach players the same stuff as in the video, but in an interactive manor, where they can play around with each concept at their own pace.

Here is a quick clip from a part of the tutorial. There is still a lot to do but the functionality of the tutorial is sorted. The tutorial is missing videos and graphics to assist in explaining concepts in non-interactive sections, among other things.

tutorial_demo_gif

Next Time…

Thanks for reading! I am currently playing around with developing some nice custom sky boxes for the games, and making some nice enhancements to the systems already in place, such as: pop-up info boxes for data points in the match game graphs, and improving/providing more feedback and control for the user throughout the game. The next update will likely focus on some of these enhancements!

4d-games-logo