Initialize the framework
========================

* « Previous
* Next »

This is the first of 16 tutorials to learn how to use Gamedev Phaser. After completing this tutorial you can find the source code for this section at Gamedev-Phaser-Content-Kit/demos/lesson01.html.

Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML — the Phaser framework will generate the required `<canvas>` element.

The game's HTML
---------------

The HTML document structure is quite simple, as the game will be rendered entirely on the `<canvas>` element generated by the framework. Using your favorite text editor, create a new HTML document, save it as `index.html`, in a sensible location, and add the following code to it:


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
    <style>
 \* {
 padding: 0;
 margin: 0;
 }
 </style>
    <script src="js/phaser.min.js"></script>
  </head>
  <body>
    <script>
 const game = new Phaser.Game(480, 320, Phaser.CANVAS, null, {
 preload,
 create,
 update,
 });
 function preload() {}
 function create() {}
 function update() {}
 </script>
  </body>
</html>
```

Downloading the Phaser code
---------------------------

Next, we need to go through the process of downloading the Phaser source code and applying it to our HTML document. This tutorial uses Phaser V2 — it won't work with the current version on Phaser (V3). The V2 library is still available on the Phaser download page, below the links for the V3 download.

1. Go to the Phaser download page.
2. Choose an option that suits you best — we recommend the *min.js* option as it keeps the source code smaller, and you are unlikely to go through the source code anyway. **Please make sure to use Phaser version 2 as that's what this tutorial was written for.**
3. Save the Phaser code inside a `/js` directory in the same location as your `index.html` file.
4. Update the `src` value of the first `<script>` element as shown above.
Walking through what we have so far
-----------------------------------

At this point we have a `charset` defined, `<title>` and some basic CSS in the header to reset the default `margin` and `padding`. We also have a `<script>` element to apply the Phaser source code to the page. The body contains a second `<script>` element, where we will write the JavaScript code to render the game and control it.

The `<canvas>` element is generated automatically by the framework. We are initializing it by creating a new `Phaser.Game` object and assigning it to the game variable. The parameters are:

* The width and height to set the `<canvas>` to.
* The rendering method. The three options are `AUTO`, `CANVAS` and `WEBGL`. We can set one of the latter two explicitly or use `AUTO` to let Phaser decide which one to use. It usually uses WebGL if available in the browser, falling back to Canvas 2D if not.
* The `id` of the `<canvas>` to use for rendering if one already exists on the page (we've specified null because we want Phaser to create its own.)
* The names to use for Phaser's three key functions that load and start the game, and update the game loop on every frame; we will use the same names to keep it clean.
    + `preload` takes care of preloading the assets
    + `create` is executed once when everything is loaded and ready
    + `update` is executed on every frame.
Compare your code
-----------------

Here's the full source code of the first lesson, running live in a JSFiddle:

Next steps
----------

Now we've set up the basic HTML and learned a bit about Phaser initialization, let's continue to the second lesson and learn about scaling.

* « Previous
* Next »