Graphics_and_Sound.md

Graphics and Sound

• Graphics and Sound
  • Structure
    • Assets
    • Components
  • Display Layers
    • Layer Descriptions
    • Rearranging Layers
  • Components
  • Assets
    • Adding Assets at compile-time
      • Using PNG Files
      • Filename-Conversion

Structure

When it comes to Graphics and Sound, they are split into Assets and Components

Assets

being related to the actual binary data.
These would mean things like

• *.PNG files
• *.BIN files
• *.MP3 files
• Bitmaps

Components

meaning the Elements, that are displayed on the screen.

• Bitmap-Entities
• UI-Elements
• Sprites
• TileMaps
• TileSets

Display Layers

Graphics are displayed via a Layer-System.
Everything that is drawn, will be on one of these layers. The default formation looks like this. (The Top layer is drawn last.)

Important

The Sprites layer is not implemented yet

Layer Descriptions

Each layer comes with:

• a Go core.Name, that is used for Rearranging Layers.

With the exception of the Scene.Draw Layer, each Layer also has:

• a Direct-Access property in the core.EngineState (provided via core.Scene Lifecycle-Hooks)
• and enable and disable functions inside the core.EngineState

Layer	Description	Direct-Access	Go core. Name	EngineState En- /Disable
Text / UI	meant to display Text and ui - elements	engineState.Text	CANV_RL_TEXT	see EngineState
Map 2		engineState.Map2	CANV_RL_MAP2	see EngineState
Sprites		engineState.Sprites	CANV_RL_SPRITES	see EngineState
Scene.Draw	Displays everything rendered by the core.Scene	Scene.Draw-Lifecyclehook	CANV_RL_SCENE	En-/Disables automatically if the Scene has the Lifecycle-hook
Map 1		engineState.Map1	CANV_RL_MAP1	see EngineState

Rearranging Layers

Components

[!todo] List all available components here

Assets

Adding Assets at compile-time

Assets added at Compile-Time are available right from the Start of the application, they don't need to be requested separately by the browser and thus load quicker.

Their binary data is baked into the Executable / WASM file.

In return, they increase the size of your executable, which can lead to a slower start, depending on the size and complexity of the included Ressource. Baked-in Assets are therefore best suited for small graphics and data, that are required throughout the entire application's lifetime. (Graphics for a Mouse-Cursor or a Bitmap for a Font-TileSet for example)

Using PNG Files

For now, It is only possible to load PNG-Files.
At the moment, these are converted into *.go files and become part of the WASM binary.

The Conversion process is handled by the Makefile as long, as you follow the following steps.

Warning

To follow this process, you need to have finished the Setup first.

1. Put any PNG, you wish to become part of the Project into the ./assets - Folder in your Project

2. run the make command

make should now pick up any new or changed PNG-File and create a ./bmps/bmp.[PNGFileName].go File.

3. You can then access the PNG via the following way

import (
    "github.com/rocco-gossmann/GoWas/core"
    "GoWasProject/bmps"
)

var myPNG *core.Bitmap = bmps.BMPPngFileName

The Bitmap is available via a *core.Bitmap pointer.

Filename-Conversion

The PNGs Filename is converted into a VariableName, but due to the nature of variable names, not all characters of a filename can be put into a variable name, therefore all characters, that don't match the following regexp are stripped from the file name [A-Za-z0-9_]

Here are a few examples of file-to-variable name conversions

Asset-File	Go-File	Go-Variable
./assets/cursor.png	./bmps/bmp.cursor.go	BMPcursor
./assets/map 1.png	./bmps/bmp.map 1.go	BMPmap1
./assets/1-SpriteSheet.new.png	./bmps/1-SpriteSheet.new.go	BMP1SpriteSheetnew

[!todo] Implement Sound