Search code examples
javascripttexturesgame-enginephaser-framework

use free texture packer for phaser3

I'm using phaser3 and free texture packer, is it possible to do that? if yes please tell me how? I tried to use addAtlasJSONHash but it was logging that this function is undefined, so I tried game.addAtlasJSONHash, but the same error was happening

Solution

  • Depending on your use case there a serveral ways, for the https://free-tex-packer.com/. Here is one fast/easy way, to get everything up and running.
    (Just in case: I assume you are using Phaser3)

    In the App

    • Select Format: "Phaser3"
    • Add images
    • click export
    • download the zip

    In Phaser

    • Unpack the json and png file from the zip into our game-app-folder

    • in Scene preload: load the file(s), with atlas(docs)

        this.load.atlas('atlas', 'texture.png', 'texture.json');

    • to add a sprite to the scene just use (docs):

        // parameters are x,y, texture / atlas, frame-index
  this.add.sprite(10, 10, 'atlas', 0);

    Extra-Info: On the official phaser webpage there are many examples, to most of the features. check out this basic one for atlas https://phaser.io/examples/v3/view/textures/frames-from-single-atlas