Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


22. 十月 2015

 

As part of the ongoing Tiled Map Editor tutorial this part looks at using Object Layers, which can be used to interface your tiled map with your games code.  This particular example includes the code using TypeScript and the Phaser game library.  If you need more information on Phaser I’ve done a tutorial series here.

 

The video of this tutorial is available here or embedded below.

 

The Code

index.html

 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

app.ts

/// <reference path="phaser.d.ts"/>


class ObjectEntity {
    height: number;
    name: string;
    properties: any;
    rectange: boolean;
    rotation: number;
    type: string;
    visible: boolean;
    width: number;
    x: number;
    y: number;
}

class SimpleGame {
    game: Phaser.Game;
    map: Phaser.Tilemap;
    layer: Phaser.TilemapLayer;
    player: Phaser.Sprite;
    winZone: Phaser.Rectangle;

    constructor() {
        this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {
            create: this.create, preload:
            this.preload, update: this.update, render: this.render
        });
    }
    preload() {
        this.game.load.tilemap("ItsTheMap", "newMap.json", null, Phaser.Tilemap.TILED_JSON);
        var img = this.game.load.image("HF2_A2", "HF2_A2.png");
        this.game.load.image("Decepticon", "decepticonLarge.png");
    }
    update() {

        if (this.winZone.contains(this.player.x + this.player.width/2,this.player.y + this.player.height/2))
            alert("You Win!");

    }
    render() {
    }
    create() {
        this.map = this.game.add.tilemap("ItsTheMap", 32, 32, 64, 32);
        this.map.addTilesetImage("HF2_A2","HF2_A2");

        this.map.createLayer("Background").resizeWorld();

        this.player = new Phaser.Sprite(this.game, 0, 0, "Decepticon");
        this.player.width = 64;
        this.player.height = 64;
        this.game.world.addAt(this.player, 1);

        this.game.camera.follow(this.player);

        var something = this.map.objects["GameObjects"][0];
        var start = <ObjectEntity>this.map.objects["GameObjects"][0];
        var end = <ObjectEntity>this.map.objects["GameObjects"][1];


        this.winZone = new Phaser.Rectangle(end.x, end.y, end.width, end.height);

        this.player.position.set(start.x, start.y);

        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onUp.add(() => {
            this.player.position.add(-32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onUp.add(() => {
            this.player.position.add(32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onUp.add(() => {
            this.player.position.add(0,-32);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onUp.add(() => {
            this.player.position.add(0, 32);
        });
    }
}

window.onload = () => {
    var game = new SimpleGame();
};

 

 

The Video

 

Art, Design, Programming , , , ,

blog comments powered by Disqus

Month List

Popular Comments

Silverlight 5 has been released
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


Home > News >

10. December 2011

 

 

Microsoft finally released Silverlight 5.  As I mentioned in an earlier post the future of Silverlight seems to be in question.  This is a shame, as I a really have a project in mind that Silverlight would have been a perfect fit for.

 

I know there is a big drive to eliminate Flash and Silverlight and move the world to HTML 5, but there are two problems with that.

 

First off, the developer experiences simply do not compare.  I would much rather develop in C# than HTML5/Javascript, moving “back” to HTML feels like a giant jump backwards.

 

More importantly, HTML5 isn’t even close to either Flash or Silverlight in performance or even features.  I am sure it will be eventually, especially given all the resources being thrown behind it, but that isn’t the case today.  So I am still trying to decide if I go ahead with my Silverlight project or not… decisions decisions.

 

These are the new parts that will be of most interest to game developers:

 

Graphics
  • XNA 3D API
  • Improved Graphics Stack
  • XNA 3D built-in effects
  • XNA 3D Project Templates with full XNA Content Pipeline
  • 3D surface composition settings
  • 3D multi-sample anti-aliasing
Media

 

 

For those of you making tools, there are a number of key ( and handy ) data binding changes as well.  You can get the full list of updates here.  You can download Silverlight 5 tools here.

 

 

Now I have to wonder… is this going to be the final Silverlight release ever?  I for one, hope not.

News

blog comments powered by Disqus

Month List

Popular Comments