Animate to Phaser

Phaser 3
1

Hello - pretty new to Phaser. I’ve made some small things but am now expanding.

I am trying to convert all my old flash content using Phaser.
I had an aquarium that I coded, which had fish and decorations that need to be imported and runtime (and will vary each time). I exported the “fish” using Animate CC, which generated images and JS files fo each and they look like this:

=== random fish .js ==========
(function (cjs, an) {

var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
{name:“AchillesTang_HTML5 Canvas_atlas_”, frames: [[294,232,56,56],[381,0,208,297],[0,338,152,83],[294,299,219,120],[0,232,292,104],[0,0,379,230],[154,338,56,56]]}
];

// symbols:

(lib.CachedBmp_64 = function() {
this.initialize(ss[“AchillesTang_HTML5 Canvas_atlas_”]);
this.gotoAndStop(0);

… lots more loading and code to animate

==========================

my aquarium.js

var scene = new Phaser.Scene(“game”);

scene.preload = function() {
this.load.image(‘background’,‘http://images.powerpets.com/image/aquarium/bg-oddcity.png’)
};

scene.create = function() {
this.add.image(315,250,‘background’)
};

const config = {
type: Phaser.AUTO,
width: 630,
height: 500,
backgroundcolor: “#FFFFFF”,
scene: scene,
parent: ‘phaser-div’
};

const aquarium = new Phaser.Game(config);

Is it possible at runtime to “import” random fish .js files into this phaser aquarium (and assigned to an object so I can make them ‘swim’)?

2

There are a few ways to do this. and it really depends on if the sprite sheets…ect but, youll want to load all your fish sprites/images in the preload.

then you can make a new fish.js that extends gameObject

(below is if you are using them as a sprite sheet, and using webpack/bable (I highly recommend the boilerblate phaser setup they have where all that comes pre-configured)

export default class Fish extends Phaser.GameObjects.Sprite {
        
      constructor (scene, x, y, textureID) {
          super(scene,x,y)
            this.spriteArray['name1' ,'name2', 'name3']
           this.setTexture(this.spriteArray[textureID])
          this.scene.add.existing(this);
      }

     preUpdate (time, delta)
{
    super.preUpdate(time, delta);
  }

    update(time,delta) {
         //do  your logic for for the random swimming here
     }
}

then in your scene, in the update function, simply create new Fish(this, randomX, randomY, RandomTextureID)

that is just one of many ways, hopefully that gives you an idea, at least for what to search

3

Thanks molster - I did know about the proper way to code it, was looking for a way to make the raw .js files work. Unfortunately there are 500+ objects. Decided to take the time to make them into animated gifs instead, I think it’ll save me a lot of headaches in the long run.
Thanks again for your time

4

Hi,
Do you plan to use animated gifs in phaser?
If yes, this doesn’t work…