Where to start with making a simple title screen?

B_Studios

Hello! I’m starting my first full game with Fuze4 and I’d like to have the game open with a title screen that has a simple background pattern, bold text with the game’s name, and a start button. However, I’m not sure where to begin. Would I start with making the assets first and what would I have to do to get the screen measurements right for both docked and handheld mode? Or would I have to begin with the code first? Any help would be greatly appreciated!

rdurbin

Well can use image for background, boxes to make buttons and use arrow keys to cycle through different buttons on start screen or use touch. If only 1 button is needed. You can just have user push start. You should probably have a variable called title and set it to 1. In your main loop have a function that loads title screen. When user hits start or whatever set title to 0 and have it run game code.

Id start with simple background first to test program. Can improve it later when everything works how you expect. You can use gwidth() and gheight() to grab screen width and height for dock and portable modes. In dock its 1920, handheld 1280 for width. Height is 1080 for dock and 720 handheld

Dave

Well, there are plenty of ways you could go about this! You don't have to start with creating your assets. In fact, I would try to get something going using as few assets as possible to begin with - sometimes just by getting some code down you can learn a few things which will help in the asset design process.

You can know the screen dimensions at any time, by using gwidth() and gheight() - this will return the screen width and height. If in handheld mode, gwidth() returns 1280. If in TV mode, gwidth() returns 1920.

The problem arises when you're using co-ordinates for putting things on screen. For example:

circle( 640, 360, 100, 32, white, false )

Puts a circle on screen at x: 640, y: 360. Of course, in handheld mode, this is right in the centre of the screen. However, in TV mode this will be further towards the bottom left.

To stop this from happening, if we use ratios of gwidth() and gheight(), it stays correctly positioned:

circle( gwidth() / 2, gheight() / 2, 100, 32, white, false )

Of course, we'll run into a new problem. 100 pixels looks bigger on handheld that it does on TV mode. So, our circle size should also scale with the display mode.

circle( giwdth() / 2, gheight() / 2, gheight() / 7, 32, white, false )

Now the circle will look exactly the same whether docked or not. You could even take it out of the dock while running and it will figure out the scaling beautifully.

Of course, using gwidth() and gheight() again and again can be very annoying to type. So what I tend to do is calculate the screen dimensions every frame, then use those variables throughout the program:

// main game loop
loop
    clear()

    gw = gwidth()
    gh = gheight()

    // our circle line would now look like this
    circle( gw / 2, gh / 2, gh / 7, 32, white, false )

    update()
repeat

All of that said - there is a much simpler way around this. Use the setMode() function to make Fuze display at the resolution you want, docked or not. Doing this, you could use consistent co-ordinates throughout your program and it will look the same on either mode. The only negative to using this method is that in one of the display modes your resolution will look a tiny little bit worse. This is often completely negligible - lots of the Fuze demo programs do exactly this.

It would look something like:

setMode(1920, 1080) // if you wanted it to display in full resolution on TV. It would be setMode(1280, 720) if you wanted it to display "properly" in handheld.
                                   // When you do setMode, this changes gwidth() and gheight() to whatever you set, so you can still use them.

circle( 960, 540, 100, 32, white, false ) // This circle will look exactly the same in both handheld or tv mode, because of setMode!

Sorry if this is a little too much information. Wanted to make sure you had all the important stuff here to reference. In terms of getting things actually on screen, I'm happy to help with that too. Let me know if you need anything!

B_Studios

@rdurbin Gotcha, thank you very much! I’ll play around with trying to get a test program to work and build from there! :)

B_Studios

@Dave Thank you very much! I’ll give these a go and see what I can do! :D

Dave

@B_Studios Not at all :) Just give me a shout if you need anything!

pobtastic

I love a nice splash/ title screen :)

Here's a template I've been using for structure ... (noting that I tend to use a global struct called "game" to hold everything relating to the game/ layouts/ images/ variables/ etc);

bool show_debug = false

struct game
  bool active
  int frame_count
  // Everything else ...
endstruct

game game
game.active = false
game.frame_count = 0

old_c = 0
old_x = 0
old_y = 0

loop
  if !game.active then
    show_splash()
  endif

  initialise_variables()

  while game.active loop
    game_loop()
  repeat

  // If lives aren't zero then the game was quit prematurely.
  if game.lives == 0 then
    game_over()
  endif
repeat

/**
 * Displays the title "pre-game" page.
 */
function show_splash()
  while !game.active loop
    clear()
    // Display stuff!

    c = controls(0)
    // Test if we should start a game (by any button).
    if old_c and !(c.a or c.b or c.x or c.y) then
      game.active = true
    endif

   old_c = c.a or c.b or c.x or c.y

    update()
  repeat
return void

/**
 * New game has been started; reset variables.
 */
function initialise_variables()
  // Sets up a new game; set lives, stuff, etc, etc...
return void

/**
 * The main game loop!
 */
function game_loop()
  // Initial entry point for a new game OR
  // when a life is lost OR
  // when a new maze/ room/ whatever is entered.

  // Prevent the initialisation above from running every frame.
  rebuild = false
  while !rebuild and game.active loop
    clear()
    // GAME ON!

    c = controls(0)
    if c.x then
      show_debug = true
    endif
    if old_x and !c.x then
      show_debug = false
    endif
    // "Y" can also start a game, so add debounce.
    if old_y and !c.y then
      game.active = false
    endif

    old_x = c.x
    old_y = c.y

    if show_debug then
      show_debug(buffer) // Maze buffer/ room buffer/ whatever.
    endif

    update()
    game.frame_count += 1
  repeat
return void