DEV Community

Kartik Patel
Kartik Patel

Posted on

How to make Main Menu

#minimicro #miniscript

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

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
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode
Sub Step 3: Set Properties for those sprites 
button.x = 460 ; button.y = 150; button.scale = 0.5
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Hover Down - Change tint to slighter gray 
button.tint = "#CCCCFF"
Enter fullscreen mode Exit fullscreen mode
  • On Click - Run Game 
run "GameCodePath"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.