npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

game-object-engine

v1.0.6

Published

Game engine focused on rapidly creating a game in TypeScript.

Downloads

5

Readme

If you are developing the engine itself

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.

Installing to use in your own game:

npm install game-object-engine


You will need TypeScript for developing the engine or using the engine to create a game.

npm install typescript


Running your first application example:

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)