The Ultimate Game Structure Tutorial

Demos and Tutorials
#1

NOTE: THIS TUTORIAL ISN’T FINISHED

The Ultimate Game Structure Tutorial

Second 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):

this part is unfinished

``

1 Like