AssemblyScript vector button

May 16, 2021

NOTE: I skip over a lot of AssemblyScript basics in this tutorial. If you need help, please contact me on twitter (@battagline) or the AssemblyScript Discord (http://discord.gg/assemblyscript) (#gamedev channel)

I’ve created a Button class that allows the developer to quickly create a UI button that game developers can use for simple UI interaction in their vector game. The button is just a square with some text that has a hover and click color. Two functions are passed to the Button to define the logic that is run when the mouse button is down and up over the button. Let’s put together a little app that displays a button that does something simple. First, let’s import the classes we need from vectorengine, export the VectorEngineExports and initializes the vector engine. Here’s the code:


  import { VectorEngine, Button, DisplayString, playSFX } from 'vectorengine';
  export { VectorEngineExports } from 'vectorengine';
  VectorEngine.init();

The export and VectorEngine.init call are required now in every Vector Engine app. The export call exports the functions the JavaScript portion of Vector Engine needs to run, and VectorEngine.init function initializes the Vector Engine AssemblyScript code. Next I’m going to create a function to make a click sound. I created the code for this function using my sound effects generator.

Here's the code I generated for a click sound:


  @inline function clickSound(): void {
    playSFX(4, 698, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 3112, 0, 0, 0, 0.01, 1, 0, 0,
      0, 0, 1, 7, 44, 0);
  }

After that I declare a few color constants to use with the display string and the button:


  const blue: u32 = 0x99_99_ff_ff;
  const yellow: u32 = 0xff_ff_00_ff;
  const white: u32 = 0xff_ff_ff_ff;

Next I create a text and a button object. With the new game object classes, these objects will be automatically registered with the Vector Engine and render after the game logic runs:


  const text = new DisplayString("mouse up or down", 0.0, 0.3, 0.05, white);

  const button = new Button("button test", 0.0, 0.0, 0.05, white, yellow, blue,
    (): void => { // on mouse down
      text.overwrite("mouse down");
      clickSound();
    },
    (): void => { // on mouse up
      text.overwrite("mouse up");
    }
  );

The DisplayString is going to start with the text "mouse up or down" because I'm going to overwrite it with "mouse up" or "mouse down" depending on if the user is pressing the mouse button down over the button. I create the Button object with a label "button test", an on mouse down function that overwrites our DisplayString with the phrase "mouse down" and triggers the click sound. The on mouse up function overwrites the DisplayString text with the words "mouse up".

I've decided to change the name of the function I was calling gameLoop in previous tutorials to gameLogic, the latter being a more accurate description. Right now, the gameLogic function doesn’t really do anything as the functionality of the app is pushed into the mouse down and mouse up functions in the Button object. Here's that last bit of code:


  let time_count: i32 = 0;

  export function gameLogic(delta: i32): void {
    time_count += delta;
  }

HTML

The HTML file doesn't change much from previous tutorials. I changed the name of the .wasm file, and gameLoop is now called gameLogic. Remember to serve the page from a web server, or it won't work. Here's the HTML code I have:


  <html>

  <head>
    <style>
      body {
        background-color: #3b3b3b;
        text-align: center;
      }
    </style>

  </head>

  <body>
    <canvas width="640" height="640" id="cnvs"></canvas>
    <script type="module">
      import { runVectorGame } from "https://unpkg.com/vectorengine/lib/VectorEngine.js";

      runVectorGame("cnvs", "button.wasm", "gameLogic");
    </script>
  </body>

  </html>

When you run your app, it should look like this: Vector Engine Button Tutorial

You can open the app or view the final version of the AssemblyScript code here.

(app | code)

The Art of WebAssembly

The Art of WebAssembly
Author and expert Rick Battagline eases the reader through Wasm's complexities using clear explanations, illustrations, & plenty of examples.
Learn More

Hands-On Game Development with WebAssembly

Hands-On Game Dev with Wasm
Author and expert Rick Battagline teaches 2D game development fundamentals in C++ using the Emscripten WebAssembly toolchain.
Learn More

Classic Solitaire

ClassicSolitaire.com
Are you bored right now? Play Classic Solitaire and be slightly less bored. Also, it's how I earn a living, so it would really help me out if you wasted time on my site. :-)
Play Solitaire