Skip to content

Home

Jump to bottom
sean_codes edited this page Jan 6, 2017 · 13 revisions

#Basic Setup

To get started quickly simply grab the engine.zip file and paste it into a folder on your web server. I will explain the basic files below. Once the engine is more complete I will wrap it inside a web IDE so it will be possible to develop through either this website and export or develop directly on your web server.

The main file is three main parts. The Style Sheet, the loader/compiler PHP script, and the JavaScript init function.

<html>
   <head>
       <link rel="stylesheet" type="text/css" href="css.css">
   </head>
   <body>
       <div id='view'></div>
       <script>
           cs.init();
       </script>
   </body>
<html>

After the init function is where we will create objects or load maps.

#The Game Camera

The game camera is the area the game and GUI is drawn to. The GUI and Game are drawn to hidden canvases separately then drawn to the view/camera canvas. There are a couple settings that can be tweeked to change the view.

The maxWidth and maxHeight set the maximum literal pixel size of the canvas. The engine will then try to get the closest aspect ratio to the size you set. Then it will be stretched with CSS to make fill the entire screen.

maxWidth : 500
maxHeight : 400

The scale variables allows scaling the camera. It is not very reliable because it will make drawing blurry. You should rely on the engine automatic scaling. If you would like to make the camera smaller/zoomed in set the maxHeight and maxWidth to lower values.

//Scale the camera 2 times the size
cs.camera.scale = 2;
Clone this wiki locally