DEV Community

Cover image for Creating A Menu (Cosplore3D Pt:17)
Chig Beef
Chig Beef

Posted on

Creating A Menu (Cosplore3D Pt:17)

Intro

This is a series following Cosplore3D, a raycaster game to learn 3D graphics. This project is part of 12 Months 12 Projects, a challenge I set myself. There are not many games that can get away with throwing you straight in, they usually include some sort of menu system, which is exactly what we're going to be implementing.

Menu Struct

Here's what I've created for a menu.

type Menu struct {
    buttons []*Button
}

func (m *Menu) update(g *Game) {
    for i := 0; i < len(m.buttons); i++ {
        if m.buttons[i].check_click(float64(g.curMousePos[0]), float64(g.curMousePos[1])) {
            m.buttons[i].onClick(g, m)
            break
        }
    }
}

func (m *Menu) draw(screen *ebiten.Image, g *Game) {
    text.Draw(screen, "Cosplore3D", g.fonts["title"], screenWidth/2.0-240, 80, color.RGBA{255, 255, 255, 255})

    for i := 0; i < len(m.buttons); i++ {
        m.buttons[i].draw(screen, g)
    }
}
Enter fullscreen mode Exit fullscreen mode

All the menu really is right now is a container for a bunch of buttons, and also has the ability to draw whatever we want on the screen (in this case, text). This will now show a title and a play button, which will put us right into the game, just as we had before.

Designing The Menu

We have a functional menu, but it honestly looks terrible. Cosplore3D is based off of a text based game I started (and never finished) making. Cosplore was going to be similar to idle games, making it very simple to implement. It would also run right in your console, so it would be very easy to play. When I created the starting screen for Cosplore, I had ASCII art of a planet with the title "Cosplore" over the top. I want to bring this feel into this design.

The menu for Cosplore3D

Honestly, better than I thought it would end up looking. I made the image of the planet slightly transparent so that it was darker, allowing the title to be more visible. And I also know that the play button looks terrible, but don't worry, I'm leaving it like that until I make more buttons, because if I make it look good but that doesn't look good when it says "settings", then I've messed up and wasted time.

The menu, but now with a setting button

I ended up wasting time anyway by adding the settings button. I think a design I would like to end up on would be a fading rectangle behind the text, but for now I'll leave it as is.

I'm not going to start putting stuff in the settings page without planning it first, I would like to write a list of things that I think would be helpful and then create the page.

Next

I've been putting it off but I think it's time to create our first boss. The boss fight of Enikoko needs art, general implementation (as all enemies), and extra abilities that make the boss fight interesting. We've been taking little steps lately to clean up the game (slightly), but now we're going to go back into adding a large feature.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay