Load and display images using Phaser game engine

by madisnomme

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.min.js"></script>
<div id="phaser-example"></div>

JavaScript

var Example = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize: function Example() {
        Phaser.Scene.call(this, { key: 'Example' });
    },

    preload: function() {
        var self = this;

        self.load.setBaseURL('https://cdn.phaserfiles.com/v385');
        self.load.image('taikodrummaster', 'assets/pics/taikodrummaster.jpg');
        self.load.image('sukasuka-chtholly', 'assets/pics/sukasuka-chtholly.png');
    },

    create: function() {
        var self = this;

        self.add.image(100, 300, 'taikodrummaster');
        self.add.image(200, 300, 'sukasuka-chtholly');
    }

});

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 400,
    parent: 'phaser-example',
    scene: Example
};

var game = new Phaser.Game(config);