phaser | fast 2D game framework for making HTML5 games | Game Engine library

export class Circle extends Phaser.GameObjects.Shape {
    tween;
    constructor(scene:Phaser.Scene, x, y) {
        super(scene);
        let enemy = scene.add.circle(x, y, 20);
        enemy.setStrokeStyle(1, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: enemy,
            x: 560,
            y: 200,
            ease: 'Power1',
            duration: 3000,
            yoyo: true,
            repeat: -1
        });
    }
}

update() {
    //Always returns  the orginal position of x and not the updated or current state of x
    console.log(enemy.x);
}

var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: '100%',
height: '100%',
mode: Phaser.Scale.RESIZE,
autoCenter:Phaser.Scale.CENTER_BOTH,
physics: {
  default: 'arcade',
  arcade: { 
    debug: true,
  },
pixelArt:true,
render:{
  antialias: false,
}
},

scene: {
  preload: preload,
  create: create,
  update: update,
} 
};

function preload(){
  this.load.image("tiles", "assets/turtle_wars_tiles.png");
  this.load.tilemapTiledJSON("tutorial_map", "assets/tutorial_map.json");
  //preloading player
  this.load.spritesheet("player", "assets/characters.png", {
  frameWidth: 26,
  frameHeight: 36,
  });
}

  const map = this.make.tilemap({ key: "tutorial_map", tileWidth:48,tileHeight:48 });
  const tileset = map.addTilesetImage("turtle_wars_tiles", "tiles");

  for (let i = 0; i < map.layers.length; i++) {
    const layer = map.createStaticLayer(i, tileset,0,0)
    layer.setDepth(i);
    layer.setScale(5)
    layer.setCollisionByProperty({ collides: true });
    this.physics.add.collider(this.player.collider, layer).collideCallback = () =>{
    this.player.collide()
    };
  }

    class MainScene extends Phaser.Scene {
    constructor() {
      super({ key: 'MainScene' })
    }

    preload() {
        this.load.image('grass','./assets/map.png',);
        this.load.spritesheet('graf', './assets/wang.png', { frameWidth: 200, frameHeight: 170})
      }
    
    create() {
      this.add.image(100,400,'grass');
      this.playerMap = {};
      Client.askNewPlayer();
      window.myScene = this;
      this.body  = this.matter.bodies.circle(
          1,
          1,
          10,
          {
              isSensor: true
          }
          );
    }
    addNewPlayer(id, x, y) {
        if(id == clientID){
            this.playerMap[id] = this.matter.add.sprite(x, y, 'graf','', {'shape' : this.body['player-20-00']}).setScale(.5);
            this.player = this.playerMap[id];
            this.cameras.main.centerOn(this.player.x, this.player.y)
        }
        else{
        this.playerMap[id] = this.add.sprite(x,y,'graf').setScale(.5);
        }
    }
    removePlayer(id){
        this.playerMap[id].destroy();
    delete this.playerMap[id];
    }
    movePlayer(id, x, y) {       
        // var player = this.playerMap[id];
        // var distance = Phaser.Math.Distance.Between(player.x,player.y,x,y);
        // var duration = distance*10;
        // var tween = this.add.tween(player);
        // tween.to({x:x,y:y}, duration);
        // tween.start();
        
    }
  
    update(){
       //haven't been able to access any variables Ive called from here
       this.cameras.main.centerOn(this.player.x, this.player.y)//causes error "can't read properties of undefined"
//replacing this.player.y or y with playerMap[a].x or y doesn't work either even though its accessible from everywhere else and === (equivalent) 
    }
}

var Client = {};
var clientID;
Client.socket = io.connect();
Client.askNewPlayer = function(){
    Client.socket.emit('newplayer');
}
Client.socket.on('newplayer',function(data){
    window.myScene.addNewPlayer(data.id,data.x,data.y);
});

Client.socket.on('allplayers',function(data){
    console.log(data);
    for(var i = 0; i < data.length; i++){
        window.myScene.addNewPlayer(data[i].id,data[i].x,data[i].y);
    }
});

Client.socket.on('remove',function(id){
    window.myScene.removePlayer(id);
});
Client.socket.on('move',function(data){
    window.myScene.movePlayer(data.id,data.x,data.y);
});
Client.socket.on('id',function(id){
    clientID = id;
})

let items = //my container with 4 child sprites to click on
let i = 0;
item.list.forEach(function(obj) {
    obj.setInteractive();
    (function(i) {
        obj.on('pointerdown', function(i){
            console.log(i);
        }.bind(this, i));
    })(i);
    i++;
});

import React, { Component } from 'react'
import Phaser from 'phaser'

class Game extends Component {

  constructor() {
    super();

    this.config = {
        type: Phaser.AUTO,
        width: 700,
        height: 600,
        parent: "game",
        pixelArt: true,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
        scene: {
            preload: function(){
              this.load.image('tiles', process.env.PUBLIC_URL + '/assets/TILES.png');
              this.load.tilemapTiledJSON("map", process.env.PUBLIC_URL + "/assets/MAP.json");
            },
            create: function(){
              const map = this.make.tilemap({ key: "map" });
              const tileset = map.addTilesetImage("TILES", "tiles");

              const worldLayer = map.createLayer("World", tileset, 0, 0);
            },
            update: function(){

            }
        }
    };

    this.game = new Phaser.Game(this.config);


  }

  render() {
    return (<div id="game"></div>)
  }
}

export default Game;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Game from './Game';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

this.testSprite = this.add.sprite(100, 100, 'button')
    .setInteractive();

this.input.dragDistanceThreshold = 20;
this.input.setDraggable(this.testSprite);

this.input.on('drag', function (pointer, obj, dragX, dragY) {
   obj.x = dragX;
   obj.y = dragY;
});

this.testSprite = this.add.sprite(100, 100, 'button')
    .setInteractive(new Phaser.Geom.Rectangle(0, 0, 1000, 1000));

import { Actor } from "./Actor";
import { Level } from "./Level";
import { Layer } from "./shared";
import { Projectile } from "./Projectile/Projectile";
import { GameScene } from "../scenes/GameScene";
import { Player } from "./Player";
import { GrapplingHook } from "./GrapplingHook";

interface ActorConstructor {
    new (scene: Phaser.Scene, x: number, y: number): Actor;
}

interface GrapplingHookContructor {
    new (scene: GameScene, x: number, y: number): GrapplingHook;
}

export class Spawner {
    private projectiles: Phaser.GameObjects.Group;
    private actors: Phaser.GameObjects.Group;
    private grapplinghooks: Phaser.GameObjects.Group;

    constructor(private scene: GameScene, private level: Level) {
        this.actors = this.scene.add.group();
        this.setUpGrapplingHooks();
    }

    spawnDynamic<T extends ActorConstructor>(
        layer: Layer,
        type: T
    ): Phaser.GameObjects.Group {
        const objects = this.level.getObjects(layer);
        const instances = objects.map((e) => new type(this.scene, e.x, e.y));
        const group = this.scene.add.group(instances);
        this.level.addGroundCollision(group);
        return group;
    }

    spawnPlayer(layer: Layer): Player {
        const player = this.spawnDynamic(
            layer,
            Player
        ).getChildren()[0] as Player;

        this.actors.add(player);

        return player;
    }

    spawnGrapplingHook<T extends GrapplingHookContructor>(
        type: T,
        x: number,
        y: number,
        xVelocity = 0,
        yVelocity = 0
    ): void {
        const grapplinghook = new type(this.scene, x, y);
        this.grapplinghooks.add(grapplinghook);
        grapplinghook.body.setVelocity(xVelocity, yVelocity);
        grapplinghook.body.setCollideWorldBounds(true, undefined, undefined, true);
    }

    destroyGrapplingHooks() {
        this.grapplinghooks.getChildren().map(child => child.destroy());
    }

    private getObjectData(
        object: Phaser.Types.Tilemaps.TiledObject
    ): Record<string, unknown> {
        const props = object.properties as unknown;
        const data: Record<string, unknown> = {};

        if (props instanceof Array) {
            props.forEach((p: { name: string; value: unknown }) => {
                data[p.name] = p.value;
            });
        }

        return data;
    }

    private setUpGrapplingHooks() {
        this.grapplinghooks = this.scene.add.group();
        this.grapplinghooks.runChildUpdate = true;
        this.level.addGroundCollision(this.grapplinghooks, (grapplinghook) =>
            (grapplinghook as GrapplingHook).onLevelCollide()
        );

        this.scene.physics.add.collider(
            this.grapplinghooks,
            this.level.getLayer(Layer.Bricks),
            (grapplinghook) => (grapplinghook as Projectile).onLevelCollide()
        );

        this.scene.physics.add.collider(
            this.grapplinghooks,
            this.actors,
            (grapplinghook, entity) => {
                (grapplinghook as Projectile).onCollide(entity as Actor);
            }
        );
    }
}

import { TILE_WIDTH } from "./shared";
import type { GameScene } from "../scenes/GameScene";
import { Actor } from "./Actor";
import { Assets } from "./shared";
import { GrapplingHook } from "./GrapplingHook";

interface Controls {
    Left: Phaser.Input.Keyboard.Key;
    Right: Phaser.Input.Keyboard.Key;
    Jump: Phaser.Input.Keyboard.Key;
    ThrowGrapplingHook: Phaser.Input.Keyboard.Key;
}

export class Player extends Actor {
    protected readonly totalHitPoints = 3;
    protected readonly immunityAfterDamageTime: number = 1000;

    private controls: Controls;

    constructor(scene: GameScene, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Player], 1);

        // controls
        this.controls = {
            Left: scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
            Right: scene.input.keyboard.addKey(
                Phaser.Input.Keyboard.KeyCodes.D
            ),
            Jump: scene.input.keyboard.addKey(
                Phaser.Input.Keyboard.KeyCodes.SPACE
            ),
            ThrowGrapplingHook: scene.input.keyboard.addKey(
                Phaser.Input.Keyboard.KeyCodes.H
            )
        };
    }

    /**
     * Throws a projectile at a given angle and force
     * @param time The current game time
     * @param angle The angle to throw the projectile; Should be a value between -90 (straight down) and 90 (straight up)
     * @param force What velocity to throw the projectile at
     */

    protected throwGrapplingHook(time: number, angle: number, force: number) {
        if (angle > 90 || angle < -90) {
            throw `throwProjectile(angle) must be between -90 and 90; current value: ${angle}`;
        }

        this.lastProjectileThrowTime = time;

        let x = this.body.x;
        if (this.flipX) {
            x = x + TILE_WIDTH;
        }

        // calculate the x and y force based on angle and total force
        // angle: 0 -> x velocity at 100%, y at 0%
        // angle: 90 -> x velocity at 0%, y at 100%

        const percentYForce = angle / 90;
        const yVelocity = force * percentYForce * -1;
        let xVelocity = force - Math.abs(yVelocity);

        if (this.body.velocity.x < 0) {
            xVelocity *= -1;
        }

        this.scene.spawner.spawnGrapplingHook(
            GrapplingHook,
            x,
            this.body.y,
            xVelocity,
            yVelocity
        );
    }

    protected onUpdate(): void {
        if (!this.active) {
            return;
        }
    }
}

import type { Actor } from "./Actor";
import { Assets } from "./shared";

export class GrapplingHook extends Phaser.Physics.Arcade.Sprite {
    declare body: Phaser.Physics.Arcade.Body;

    constructor(scene: Phaser.Scene, x: number, y: number) {
        super(scene, x, y, Assets[Assets.Projectiles], 1);

        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.body.setAllowGravity(false);

        this.body
            .setSize(this.body.width, this.body.height - 20, true)
            .updateCenter()
    }

    onCollide(target: Actor): void {
        this.destroy();
    }

    onLevelCollide(): void {
        this.setVelocity(0,0);
    }

    update(): void {
        this.flipX = this.body.velocity.x >= 0
    }
}

onLevelCollide(player: Player): void {
        player.setVelocityX(100);
        this.setVelocity(0,0);
    }

    new webpack.DefinePlugin({
        "typeof CANVAS_RENDERER": JSON.stringify(false),
    }),

if (typeof WEBGL_RENDERER && typeof CANVAS_RENDERER)
{}

if (typeof WEBGL_RENDERER && !typeof CANVAS_RENDERER)
{
    WebGLRenderer = __webpack_require__(/*! ../renderer/webgl/WebGLRenderer */ "../node_modules/phaser/src/renderer/webgl/WebGLRenderer.js");

    //  Force the type to WebGL, regardless what was requested
    config.renderType = CONST.WEBGL;

    game.renderer = new WebGLRenderer(game);
}