Clone the project and build it.
It can be easily built using npm run build
from the command line.
It will transpile the code into the ./dist
directory with the TypeScript typings files.
- Known issue: If the
dist
directory exits it will fail to compile. Delete it first.
npm install game-object-engine
npm install typescript
Put your images somewhere useful in your project, we'll use the Images
directory.
- Images/Player.png
- Images/Overworld.png
Create a Player class that extends GameObject
:
- GameObjects/Player.ts
export class Player extends GameObject {
private speed = 0.1;
// All options in the super() call can be set at a later time,
// but if these will never change or you want some defaults, best to set them here.
constructor() {
super(<GameObjectParams>{
layer: 1,
imageSrc: "Images/Player.png",
// optional
name: "player"
// You can create a transform here, but if you leave it out a Transform with size (1, 1) and position(0, 0) will be created.
});
// if you like most of what was created in the transform,
// go ahead and override some now
this.transform.size = new Vector2(0.75, 1); // a little thinner in the x axis
}
// override this function inhereted from GameObject to control behavior
public update(): void {
// some basic controls
// for simplicity we haven't used Time.deltaTime but it's a good idea to, like:
// `p.x -= this.speed * Time.deltaTime`
// This has the benefit of making your game not slow down if your framerate ever drops.
let p = this.transform.position;
if (Input.keys(Keys.ArrowLeft)) {
p.x -= this.speed;
}
if (Input.keys(Keys.ArrowRight)) {
p.x += this.speed;
}
if (Input.keys(Keys.ArrowUp)) {
p.y -= this.speed;
}
if (Input.keys(Keys.ArrowDown)) {
p.y += this.speed;
}
}
}
Create the Overworld that extends from GameObject:
- GameObjects/Overworld.ts
export class OverworldBackground extends GameObject {
constructor(b) {
super({
layer: 0,
imageSrc: "Images/Overworld.png",
});
// make it kinda big (60 times bigger than the player is tall)
this.transform.size = new Vector2(60, 60);
// shift it so its center is at the origin
this.transform.position = boundarySize.scale(-0.5);
}
}
Create a class that extends Level
and a LevelController that extends GameObject
.
Let's say we make an OverworldLevel and an OverworldController.
export class OverworldLevel extends Level {
constructor() {
super(<LevelParams>{
managingGameObjectClass: OverworldController,
imageSrcs: [
'Images/Player.png',
'Images/Overworld.png'
],
// Override the unitSize here if you'd like to,
// all objects scale according to the unit size.
// A unitSize of 25 means all Transforms with a size of
// Vector2(1, 1) will be 25 x 25 pixels in size.
unitSize: 25
});
}
}
export class OverworldController extends GameObject {
private player: Player = null;
private background: OverworldBackground = null;
constructor() {
super();
this.player = new Player();
this.background = new OverworldBackground();
}
// override
public update(): void {
// put level specific logic here if you'd like.
// Remember that GameObjects should handle their own update() calls.
// Maybe put a timer logic or something here?
// you can swap to another level (once you create one) by calling
// GameManager.loadLevel('Level2');
}
}
create an index.ts
file
import GameLauncher, and GameOptions from the engine and any of your classes,
then create a function that will run on window load:
function gameLauncher() {
new GameLauncher(<GameOptions>{
parentElementID: "game-holder",
screenWidth: 800,
screenHeight: 750,
imageAntiAliasing: false,
layers: 3,
backgroundColor: "#001100",
border: "1px solid #008800",
// allow showing debug tools by pressing ctrl + shift + alt + z
allowToggleDebug: true,
// have debug tools open by default
showDebug: true,
// you must register any Level classes here to be able to switch to them.
levelClasses: {
// 'Level2': Level2
'Overworld': OverworldLevel,
},
// if not provided the levelClasses[0] will be used,
initialLevel: 'OverworldLevel'
});
}
// run the gameLauncher() function on page load.
window.addEventListener('load', gameLauncher, false);
In your HTML file you'd like to have your game in, make sure you have a <div id="game-holder"></div>
as the entry point. The game will inject itself here automatically (you can set a different id
to look for in the GameLauncher options)
<html>
<head>
<!-- import scripts here -->
<!-- a bundler like webpack or gulp will generate a single file -->
<!-- otherwize import all of the file you'll need -->
<script src="dist/bundle.js"></script>
</head>
<body>
<div id="game-holder"></div>
</body>
</html>
build the project with tsc
or set up a build script for webpack to "build": "tsc & webpack"
(or whatever your project happens to need)