The Ultimate Game Structure Tutorial

Demos and Tutorials
#1

The Ultimate Game Structure Tutorial

Third Edition by @noobfield

this tutorial is separated in parts, so you can learn what you prefer.

Wick API

The Wick API is composed of classes, all based on Wick.Base. The most important classes for creating games are: Wick.Clip, Wick.Layer, Wick.Frame and Wick.Project

1. project v.s. this.project

The project global variable refers to the currently focused clip of the project (project.focus), which is typically the root clip of the project project.root.

this.project is a variable inside all Wick Objects, which defines the Wick.Project of this game.

This is important to know, since the asset library can only be accessed by Wick.Project

2. Paper.js and how Wick renders

When you’re using Wick Editor, it isn’t directly rendering the paths, rather instead Wick is using Paper.js, a separate JavaScript library.

Wick syncs itself with the View system. Object’s views are viewable with the .view property.

Using your view, you can get the Paper.js API. Now with this you can create a Wick.Path and move it.

Example:

let paper = this.view.paper;
let item = this.view;
let circle = this.circle = new paper.Path.Circle({
    center: item.position,
    radius: 70,
    fillColor: 'red'
});

let path = this.path = new Wick.Path({path: circle});

project.activeFrame.addPath(path);

onEvent('update', function () {
  path.x = mouseX;
  path.y = mouseY;
});

3. Scripts

Scripts inside clips are just strings of JavaScript. Not only that, you can edit them.

You get the following functions to mess with:

  • .getScript(name): Returns the script with the given name. The script is in an object form (e.g.: {script: 'this.remove()', name: 'default'})
  • hasScript(name): Returns true if the script exists.
  • addScript(name, src): Sets the script’s source.

Please note that only valid events are accepted by scripts.
``

Code Structure

When structuring your code, there are multiple ways:

The first and most common way is the multi-script, multi-clip style, which is most recommended by the editor. But it does not scale very well. This method will have you running in circles to fix certain problems in your code.

The second better way is the single-script, multi-clip style, which makes every clip have its code inside one script. This simplifies your code by making it visible inside one script, but still forces you to select different objects to edit them. Unfortunately, this is the best way you can do this with the current script system, where Wick.Tickable objects have their scripts inside them, instead of scripts their own objects referenced by Wick.Tickable objects.

What happens when a project becomes too big?

This part references what happen to Forum Fighters: Rewritten.

A wick game (just like an ActionScript 2 game) can only get so large before the coding paradigm forced makes it almost impossible to continue development.

Forum Fighters: Rewritten, is an example of this. After months of development the game started to get too large, causing massive slowdowns in development. These slowdowns made the project be discontinued forever, since the developers couldn’t expand the game without slowdowns or slow development times.

OOP v.s. VOP v.s. Progressive

Each of these programming paradigms use different ways of structuring your code.

Progressive is one of the first paradigms, where it can literally be translated into Assembly code on your mind very easily. You define variables, functions, pointers, structures, interrupts and many more things that can be represented as data (variables) or procedures (functions).

int main() {
  printf("hello world!");
  return 0;
}

void update(Pos pos, int xx, int yy) {
  pos.x += xx;
  pos.y += yy;
}

OOP simplifies this by adding objects and methods. So instead of passing a Sprite struct and a GL_SAFE_RENDERER pointer to drawspr(), we have a Sprite object with a .draw() method which asks for a SafeRenderer object.

class Player {
  constructor() {
    this.name = prompt("Player Name");
    this.clip = clone(player_clip);
  }
  walk(x, y) {
    this.clip.x += x;
    this.clip.y += y;
  }
}

Finally we have VOP which is the paradigm typically seen in AS2/Wick (and GameMaker). Objects have variables which are mostly used as the method of storing things, and code inside certain events do the work.

/// Default Script
this.name = prompt("Name:");

// Update script
this.x = mouseX;
this.y = mouseY;
ECS and Code Reuse

Code reuse is essential for big projects, since you shouldn’t need to repeat yourself too much
The typical ways of thinking about this are what was described in the last section.

ECS (also known as DOD) is a different way of thinking about code. Instead of thinking about what the clip is, and what it does, you create discrete systems and components.

Let’s imagine a kitchen. Chefs (systems) cook food by stacking and mixing ingredients (components). This is ECS.

2 Likes