2d-gaming

2d-gaming

Description

This is an Angular package fo developing 2d games in angular. Please report issues/questions/any ideas to better help this package.

Installing

1. Run npm instll 2d-gaming
2. Import { TwoDGaming } from '2d-gaming'; Into your module
3. Import { GameAreaObject, ObjectComponent, ObjectDesign, PositionObject } from '2d-gaming' into the file of your game.

Getting Started

Setup your game

1. Setup your game area. Each area object will have a name, width, height and gravity.

First Create Your Game Object

    // Create A New File gameArea.ts
    import { GameAreaObject } from '2d-gaming';

    export class GameArea implements OnInit{

        component: GameAreaObject;

        constructor() {
            this.component = new GameAreaObject('myGame', '300px', '300px');
            this.game.gravity = 0;
        }
    };

Then SetUp Your Object In Your Component

// Create A New File game.component.ts
  import {GameAreaObject, ObjectComponent, ObjectDesign, PositionObject, ObjectArray } from '2d-gaming';
  import {GameArea} from './gameArea.ts':
  @Component({
      selector: 'app-game',
      templateUrl: './game.html'
  })

  export class GameComponent implements OnInit {
      gameObject: GameArea

      ngOnInit() {
          this.gameObject = new GameArea();
          this.gameObject.component.doEveryFrame = (() => this.doPerFrame());
      }

      start() {
          this.gameObject.component.start(); // this starts the game
      }

      stop() {
          this.gameObject.component.stop(); // this stops and resets the game
      }

      doPerFrame() {
          // put code here you want to run everyFrame
      }
  }

<!--- In game.html Place This-->
<app-game-area></app-game-area>
<button (click)="start()">Start</button>

2. Now lets add a player.

// Create A New File player.ts
  import {GameAreaObject, ObjectComponent, ObjectDesign, PositionObject } from '2d-gaming'

  export class Player {
      component: ObjectComponent;
      position: PositionObject;
      design: ObjectDesign;

      constructor(public game: GameAreaObject) {
          this.design = new ObjectDesign(20, 20, 'square', 'green'); // create a design. we will add this to our player
          this.position = new PositionObject(150, 150); // create a position object. we will add this to our player
          this.component = new ObjectComponent(this.game, this.design, this.position) // add the design and position to the player.
          // we inject a gameObject into the constructor so the player can know what game it belongs to
      }
  }

Now SetUp the player in the component

  // back in game.component.ts
  gameObject: GameArea;
  playerObject: Player; //Import Player from the previous file

  ngOnInit() {
      this.gameObject = new GameArea();
      this.playerObject = new Player(this.gameObject.component); // Create a new Instance of it and inject the component of the gameObject in its constructor
  }

3. Lets give our player movement.

// Im using HostListener. You can use another event detection if you pefer
   @HostListener('document:keyup', ['$event'])

  onKeyup(e: KeyboardEvent) {
      const code = e.keyCode;
      this.playerObject.component.clearMovement();
  }

  @HostListener('document:keydown', ['$event'])

  onkeydown(e: KeyboardEvent) {
      const code = e.keyCode;
      // D Key
    if (code === 68) {
        this.playerObject.component.moveRight(1.5); // move right
    }
    // A Key
    if (code === 65) {
        this.playerObject.component.moveLeft(1.5); //move left
    }
    // W Key
    if (code === 87) {
        this.playerObject.moveUp(1.5); // move up
    }
    // S Key
    if (code === 83) {
        this.playerObject.component.moveDown(1.5); // move down
    }
  }

4. Lets add an object that will move from one point to another. To do this we set object.path. The path object has a x and y value for the points you want your object to move to.

// Create a new file item.ts
import {GameAreaObject, ObjectComponent, ObjectDesign, PositionObject, IPath } from '2d-gaming'

  export class item {
      component: ObjectComponent;
      position: PositionObject;
      design: ObjectDesign;

      constructor(public game: GameAreaObject) {
          this.design = new ObjectDesign(20, 20, 'square', 'red'); // create a design. we will add this to our object
          this.position = new PositionObject(100, 100); // create a position object. we will add this to our object
          this.component = new ObjectComponent(this.game, this.design, this.position) // add the design and position to the object.
          // we inject a gameObject into the constructor so the object can know what game it belongs to
          this.component.newPath = {
              x: 200, // New X Pos
              y: 200, // New Y Pos
              speed: 1, // Speed It Moves At
              infinit: false // If it stops at designated location or continue after
          }
      }
  }

add the object to our component

  gameObject: GameArea;
  playerObject: Player; //Import Player from the previous file
  movingObject: item; //Import item from the previous file

  ngOnInit() {
      this.gameObject = new GameArea();
      this.playerObject = new Player(this.gameObject.component); // Create a new Instance of it and inject the component of the gameObject in its constructor
      this.movingObject = new item(this.gameObject.component)
  }

Now Run And click Start

Objects In Package

Initialize each object like this

   var Init = new Object();

ObjectComponent

DesignObject

PositionObject

MovementObject

GameComponent

ObjectArray

This is a object that lets have multiple objects in one. Its main purpose is to create multiple intances of one object.