moonbyt3

TexturePacker Multipacked Textures

Recommended Posts

Hey guys
I've started gambling slot project in pixi.js + typescript, but I hit the wall and need some advice about multipacked spritesheets.
I recieved pngs for animating wining lines on slot. Each image is 1920x1080, which means when I load all 75 images into single spritesheet it becomes around 16K width/height which is a NO NO if I understand correctly. Spritesheets shouldn't be more than 2K in order to load properly on mobile devices.
So I tried to use TexturePacker's "multi pack" option. Now I recieved  37 pngs (every spritesheet is now 1920x2160 - two frames in each) and jsons for that one animation. 
My question is how can I pack everything and start animation?

Currently i have one json file for all other assets, and those animations run fine, since their spritesheets aren't that large (those are reel symbols, and smaller animations)

{
  "animatedA": "/assets/animations/a.json",
  "animatedChest": "/assets/animations/chest.json",
  "animatedCoins": "/assets/animations/coins.json",
  "animatedCrown": "/assets/animations/crown.json",
  "animatedGoblet": "/assets/animations/goblet.json",
  ......
}

This is the code used for loading assets from json

import * as PIXI from 'pixi.js';
import { toPairs as _toPairs, range as _range } from 'lodash';
import assetsJson from '../data/assets.json';
// rest of imports

class Renderer {
  private loadingBar: PIXI.Graphics;

  private constructor() {
    ....
  }

  loadAssets = (): void => {
    _toPairs(assetsJson)
      .reduce((loader: PIXI.Loader, [name, path]: [string, string]) => {
        return PIXI.Loader.shared.add(name, path);
      }, this.app.loader)
      .load(this.onAssetsLoaded)
      .onProgress.add((loader) => {
        this.loadingBar.position.x = window.innerWidth / 2 - this.loadingBar.width / 2;
        this.loadingBar.drawRect(0, 0, Math.ceil(loader.progress) * 3, 10);
      });
  };
}

Now, I wouldn't like to paste all 37 paths to assets.json like 

{
  ...
  "multiLineSpike_1": "/assets/animations/line-spike/line-spike-0.json",
  "multiLineSpike_2": "/assets/animations/line-spike/line-spike-1.json",
  "multiLineSpike_3": "/assets/animations/line-spike/line-spike-2.json",
  "multiLineSpike_4": "/assets/animations/line-spike/line-spike-3.json",
  ...
}

since those are only for one wining line animation, i will have 8 of them, which means it will take for ages.

Is there any way i can loop trough files and add them in more elegant way?
 

Share this post


Link to post
Share on other sites

Hi, sorry but PIXI cant load multiPack from tp , but i asked Andreas Loew to add some meta to make this easier.
So now you have 2 new meta named related_multi_packs and normal_map inside json to manage easier in PIXI.
Check your version of Texture Packer pro, I can't remember what update where this added.

here for you a example from my game loader core, it show you one way to manage and process multi-pack , normals, and animations.
https://github.com/djmisterjon/ANFT/blob/e4002fab0428331fa5c5e844f1e9426a2795c5ec/js/game/global/loaders.js#L398

Sorry my example is very customised for my game engine and maybe not a good approche for you, i dont think you will can found a better free public demo code.
Note this example is old and maybe have some weird code but it work.

tips:look also for loader.pre

https://pixijs.download/dev/docs/PIXI.Loader.html
otherwise you would have to see with @xerver, (Autor) or @AndreasLoew , if they intends to implement a native multipack support in the PixiLoader with new metas from tp, but multi-pack remains a paid premium feature from tp.

14 hours ago, moonbyt3 said:

Now, I wouldn't like to paste all 37 paths to assets.json like 

Is there any way i can loop trough files and add them in more elegant way?

Sure , create a simple node programme to leech all your ressources files from a directory and build a register! no need to handwrite all your game resources !
Your will just need to have a good structures folders hierarchy. 

or use npm recursive-readdir  

https://www.npmjs.com/package/recursive-readdir

Edited by jonforum

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.