moonbyt3 Posted September 25, 2020 Share Posted September 25, 2020 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? Quote Link to comment Share on other sites More sharing options...
jonforum Posted September 26, 2020 Share Posted September 26, 2020 (edited) 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 September 26, 2020 by jonforum moonbyt3 1 Quote Link to comment Share on other sites More sharing options...
moonbyt3 Posted September 28, 2020 Author Share Posted September 28, 2020 Thanks for info, it will be helpful ❤️ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.