Check Sudoku - Unity Tutorial - 3. App skeleton

In the previous step we have set up Unity and GitHub. In this one, we will create an app skeleton, with home page, settings panel, empty board:

Implementation

Since a lot has changed in Unity over the years (e.g. TextMeshPro is used instead of regular text) we start from completing a simple tutorial:

• Creative Core: UI

Let's start with the home page. We want to have a Sudoku background, but without paying for any "stock" photos, therefore we print one page of problems from WSPC 2021 and take the picture ourselves:

The first challenge is making the home page look good in both portrait and landscape orientation. We achieve it by using AspectRatioFitter for the background as explained here. 

After reading this we add a title anchored to the upper left corner of the screen, and panel with buttons anchored to the lower right corner. 

This gives us the following UI:

We add some background music from pixabay.com.

Following Creative Core UI : Add toggles and sliders, we add an audio setting page activated by the "Settings" button.

Toggling pages is implemented in Unity Editor, without writing any code. For example, clicking the "Settings" button:

• activates the settings panel
• deactivates title text
• deactivates panel with home page buttons

Creating the board and configuring its layout to look nice with every phone or tablet orientation is a bit more complicated. 

We use Unity simulator to inspect the final effect:

We achieved pretty good layout by using just GridLayout and appropriate anchors.

Last, but not least, we add some action for the "Quit" button. This is the only place where we need to write a few lines of code. We create GameManager object and attach clicking of the "Quit" button to the manager method of the same name. Then we implement the Quit method and make sure it is also called when user presses the "Escape" key:

public class GameManager : MonoBehaviour
{
    ...
    // Update is called once per frame
    void Update()
    {
        if(Input.GetKey("escape"))
        {
            Quit();
        }
    }

    public void Quit()
    {
#if UNITY_EDITOR
      UnityEditor.EditorApplication.isPlaying = false;
#else
      Application.Quit()
#endif
    }
}

We can already see things that could be improved, but we're leaving them for later:

• translating the app into other languages (e.g. Polish)
• saving and loading app settings (e.g. whether the music should play, its volume, in the future saving game state)
• nicer buttons (e.g. resembling Sudoku board cells) to be done in a graphical software like GIMP.

GitHub

Commits related to this step are here:

• Initial version of CheckSudoku
• Remove .DS_Store file
• Adjust layout to several mobile devices

Next steps

The next step will implement setting the values for board cells.

Polish | English

Previous

Next