Skip to content

Getting Started

Jump to bottom
g--o edited this page Aug 21, 2019 · 12 revisions

Getting Started with JSCF

This page will hopefully help you get started with JSCF!

For API reference check the API Documentation page.

Making your first project

Using the editor

(TBD)

Using code only.

To set up a JSCF project you need to start with a basic HTML document and script. The best way is to just use the template directory from the repo.

The most important things to note are:

    <script type="text/javascript" src="./jscf.js"></script>
    <script type="text/javascript" src="./scripts/config.js"></script>
    <script type="text/javascript" src="./scripts/game.js"></script>
    ...
    <body onload = "gameStart();">

On the document, we include jscf.js itself, and our own scripts: config.js for configurations and stuff you don't wanna see regularly, and game.js as the main script. Also, note that because the engine doesn't start on it's own, we need to call it and trigger it whenever the document is ready. That's why it's good to have a gameStart() function to start the game.

We'll start by creating an engine's Game object:

var game = new Game(JSCF_CANVAS_WIDTH, JSCF_CANVAS_HEIGHT, JSC_FPS, JSC_ASSETDIR);

Now we can access it from any script we need to. It's good to keep the parameters as consts. You can check out the c'tor docs here.

Let's look at gameStart():

function gameStart()
{
    game.setup();

    // load game resources
    // load scene

    // start game
    game.start(update, true);
}

First, we call game.setup(); is the initializer of the engine. It's called only after the document is ready so that it can create the game canvas. Afterwards, it's a good time to load the game resources and prepare (at least) the first scene that we're going to show.

Lastly, we're going to start the game engine, and provide a callback function which is the update function. The second parameter determines whether or not the engine will automatically manage the scene (update+render) or will it run in a manual mode, giving full control.

From here we can use Entities and Components and resources to create our interesting scenes. It's best to check the Scene & SceneManager docs from here on, as well as the tests. Check the References section.

References

Check out the tests directory for demos. You can access them online via https://g--o.github.io/web-JSCF/

Clone this wiki locally