Introduction

Recently, I participated in Micro Jam #40. I didn't win the jam, but I had learned many things. The following blogs/videos were only possible because of this jam.

👉Drag and Drop
👉Drop Detection
👉How to package a web game in Mini Micro (Video)
👉How to package a web game in Mini Micro

Including This One,

Today, we are going to learn how to make a basic main menu screen.

What is a Main Menu?

Before understanding, it's essential to define what a Main Menu is.

The main menu is the primary interface or screen that users see when they launch a software application, game, or digital system. It serves as the central hub, providing access to the core functions or modules, such as starting a new activity, loading saved data, adjusting settings, or exiting the program.

But today by main menu I decent UI through which is the first thing any player sees when running our game. This Main Menu would be responsible for handling transitions between different Menus (Pause Menu, Settings Menu) and our main game.

This series would be divided into some parts, and each part would take the UI and features of our Main Menu to the next level.

Today is the first part of this series, where we are just going to create a basic Main Menu UI, with a Play button. When the button is clicked, we will run our game.

Implementaiton

Pseudocode

• Create Sprites
  • Button
  • Bg
  • Logo
• Set Images for these Sprites
• Render these sprites onto the display
• Create bounds for the Button Sprite
• Detect Mouse collision on Button Sprite Bounds
• React to the button events

If you are stuck or feel like you don't know something from this pseudo code, then it's normal. It's human nature to resist change, so learning something new and getting confused is also part of this nature. Below I have provided some other blogs/videos made by me maybe help you solve your doubts

• What are Bounds?
• How to Render a Sprite?
• How to Register Click on Sprites?

Code

So let's start coding according to our pseudo code.

Step 1: Sprites

Sub Step 1: Create a Sprite

button = new Sprite
bg = new Sprite
logo = new Sprite

If your background is 960*640 size, then bonus: You don't need to render a sprite; instead, use this command-

gfx.drawImage file.loadImage("PathOfImage")

Sub Step 2: Load images for those sprites

bg.image = file.loadImage("/usr/background_clouds.png")
button.image = file.loadImage("/usr/cga_ui_gold/b_4.png")
logo.image = file.loadImage("/usr/logo.png")

Sub Step 3: Set Properties for those sprites

button.x = 460 ; button.y = 150; button.scale = 0.5

Remember I only show some of the snippets so you try to figure out things yourself

Sub Step 4: Render Those Sprites

display(4).sprites.push button

Step 2: Bounds

Now comes the part where we create the Bounds.

button.localBounds = new Bounds
button.localBounds.width = button.image.width
button.localBounds.height = button.image.height

To Understand More about Bounds, go to > Bounds

Step 3: Detection of Click On The Sprite

As we know that Button is just a sprite with collisions that detects the mouse.

So we just need to check whether the bounds of the sprite contain the mouse or not. We can do this simply using the code provided below, but for a deeper understanding, I suggest checking out. How to package a web game in Mini Micro

wasDown = false
while true
    isDown = mouse.button
    if button.contains(mouse) then
        //On Hover
        if isDown and not wasDown then
            //On Click
        end if
    else
        //On hover down     
    end if
    wasDown = isDown
    yield   
end while

Step 4: Reaction to the events

There are 3 events in our code currently:

• Hover Up - Change tint of sprite back to normal

button.tint = color.white

• Hover Down - Change tint to slighter gray

button.tint = "#CCCCFF"

• On Click - Run Game

run "GameCodePath"

And our main menu is done. I am not kidding; it was just that simple.

You can also watch my video to get a better explanation of the same topic - Main Menu In Mini Micro

Outro

If this post was helpful for you, go check out my YouTube channel; it's more helpful. - Dat_One_Dev

If you feel stuck, then here is the source code -

clear
button = new Sprite
bg = new Sprite
logo = new Sprite
bg.image = file.loadImage("/usr/background_clouds.png")
button.image = file.loadImage("/usr/cga_ui_gold/b_4.png")
logo.image = file.loadImage("/usr/logo.png")
button.x = 460 ; button.y = 150; button.scale = 0.5
button.localBounds = new Bounds
button.localBounds.width = button.image.width
button.localBounds.height = button.image.height
bg.x = 960/2; bg.y = 640/2+100; bg.scale = 2
logo.x = 960/2; logo.y = 640/2+100; logo.scale = 2
display(4).sprites.push bg
display(4).sprites.push logo
display(4).sprites.push button
wasDown = false
while true
    isDown = mouse.button
    if button.contains(mouse) then
        button.tint = "#CCCCFF"
        if isDown and not wasDown then
            run "Projects/Click_ASAP.ms"
        end if
    else
        button.tint = color.white       
    end if
    wasDown = isDown
    yield   
end while