Games [BANanoPhaser 0.2] Approximately : How good are your eyes?

[Mashiane]

Ola

Download


What's New

In the game config we introduce some new properties, render, autoFocus etc. We also look at how to scale the game to fit

I chose this game because it has a resource loading functionality that displays for the user whilst resources are loading and also because I have 4 eyes! So I can always test how good my eyes are at anytime.


Extras...

Loading scripts (requires an internet connection)

PURPOSE OF THE GAME

How good are your eyes? This is a wrap of this Github done by Marcus Sanatan

You are provided with balls of different sized in each level. The task is to expand the balls on the bottom to be equal in size with the balls on the top. You can also add extra needed balls if there is more.

The code for the game is kinda cumbersome so we will touch on the parts that I think are rather useful in our game development lessons. These are

1. Showing progress when resources are being loaded.
2. Using webfonts to textualize our game
3. Scaling the game to fit the specified viewport

The rest you can learn on the code.

SHOWING PROGRESS

This is to indicate the status of the game load. We will need to do this on the preLoad sub.

Sub onPreload
    progressBar = Scene.add.graphics
    progressBox = Scene.add.graphics
    progressBox.fillStyle("0x222222", 0.8)
    progressBox.fillRect(240, 270, 320, 50)
           
    Dim width As Int = Scene.cameras.mainc.width
    Dim height As Int = Scene.cameras.mainc.height
    loadingText = Scene.make.text(width / 2, height / 2 - 50, "Loading...", "20px monospace", "#ffffff")
    loadingText.setOrigin(0.5, 0.5)
   
    percentText = Scene.make.text(width / 2, height / 2 - 5, "0%", "18px monospace", "#ffffff")
    percentText.setOrigin(0.5, 0.5)
    '
    Dim value As Double
    Dim onloadCB As BANanoObject = BANano.CallBack(Me, "onProgress", Array(value))
    Scene.load.on("progress", onloadCB)
    '
    Dim onCompleteCB As BANanoObject = BANano.CallBack(Me, "onComplete", Null)
    Scene.load.on("complete", onCompleteCB)
   
    'load resources
    Scene.load.image("separator", "./assets/separator.png")
    Scene.load.image("playerBall", "./assets/playerBall.png")
    Scene.load.image("guessBall", "./assets/guessBall.png")
    Scene.load.image("growButton", "./assets/growButton.png")
    Scene.load.image("checkButton", "./assets/checkButton.png")
    Scene.load.image("nextButton", "./assets/nextButton.png")
    Scene.load.image("retryButton", "./assets/retryButton.png")
    Scene.load.image("addButton", "./assets/addButton.png")
    Scene.load.image("disabledGrowButton", "./assets/disabledGrowButton.png")
    Scene.load.image("disabledAddButton", "./assets/disabledAddButton.png")
    'load google font script
    Scene.load.script("webfont", "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js")
End Sub

Now for the onProgress and onComplete methods. These update the graphic to show percentage and loading and after completion starts the game.

Sub onProgress(value As Double)
    Dim perc As String = Scene.Percentage(value)
    Dim strVal As String = Scene.Cstr(perc) & "%"
    percentText.setText(strVal)
    progressBar.clear
    progressBar.fillStyle("0xffffff", 1)
    progressBar.fillRect(250, 280, 300 * value, 30)
End Sub

Sub onComplete
    progressBar.destroy
    progressBox.destroy
    loadingText.destroy
    percentText.destroy
    Scene.Start(gameScene.Scene.name)
End Sub

 

[Mashiane]

Loading fonts

Whilst you can use BANano.Header.AddJavaScript for this file, for the purpose of this game it being loaded onPreload.

'load google font script
    Scene.load.script("webfont", "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js")

In the gameScene onCreate, we use a webfont method to load the font and then 'start' the game once the font is loaded.

Dim wf As PhaserWebFont
    wf.Initialize
    wf.AddGoogleFont("Luckiest Guy")
    wf.SetOnLoad(Me, "reset")

The font being used is Luckiest Guy.

This has an effect of making our text look like this..

This was added with this call on the game

levelText = Scene.add.text(20, 40, "Level: " & level, CreateMap("fontFamily": "Luckiest Guy", "fontSize": 30, "color": "#ffffff"))

 

[Mashiane]

The game workings

As usual, we add a graphic and activate its collider. This is the separator. Balls are added on the top section, guesBalls with different sizes. As we move from one level to another we use the destroy method to remove stuff from the scene. When the ball at the bottom is loaded, you need to enlarge it using scaleBall.

When you think the sizes match, select the check item, this runs a comparison of displayWidths of the balls between your balls and the top balls. If all is good, the player is indicated with a good job, else, nah!

In the Dino Dash game, meats and bombs were added via events. Here they are added when a user does something. You click the add button to add a ball.

Sub addBall
    Dim balls As List = playerBalls.getChildren
    Dim currentBall As PhaserObject = Scene.ToPhaserObject(balls.get(playerIndex))
    '
    Dim newBall As PhaserObject = Scene.ToPhaserObject(playerBalls.create(currentBall.X + 60, 450, "playerBall"))
    newBall.setScale(0.2)
    newBall.setBounceX(0.4)
    '
    playerIndex = playerIndex + 1 'move the player index To the new ball
    'Renable grow button in Case it's disabled
    growButton.setTexture("growButton")
    growButton.setInteractive
    growCount = 0    'Reset growth count For new ball
    
    If playerIndex = 2 Then
        'Change image of sprite
        addButton.setTexture("disabledAddButton")
           addButton.disableInteractive
    End If
End Sub

As you can see, the player is only allowed to add 2 balls. This is the trick to the game, with that the game will be difficult to win.

One new thing also here is changing the texture of the items. For example this disables the buttons by applying another image to them. Cool.

The rest is just logic. More levels, more balls depending on where you are at using a case statement.

 

[Mashiane]

Scaling the Game

In our game configuration, we scaled the game with..

game.config.Width = 800
    game.config.Height = 600
    game.config.scale.mode = game.ScaleModeFIT
    game.config.scale.autoCenter = game.ScaleAutoCenterCENTER_BOTH

This ensures a responsive viewport for the game that fits the 800x600 area.

For now that's all folks!!