Chop up an image into multiple sprites at run time

Happy new year :slight_smile:

Is it possible to load an image and split it up into a number of sprites?

Something similar to one of those sliding tile puzzle games. The tiles, instead of being numbered, are all part of a picture:

image

You can do that with Js I guess

Yes, I though that would be the case. I’ve had a look at the code in the load-image-from-url example, but that uses the complete image.

I’ve had a sniff through the GDJS documentation, and nothing jumps out at me that says anything like ‘pixel manipulation’ or ‘partial image’.

Any pointers to set me in the right direction would be helpful.

And is http://4ian.github.io/GD-Documentation/GDJS%20Runtime%20Documentation/gdjs.SpriteAnimationFrame.html incorrect? getPoint() is supposed to take a parameter (http://4ian.github.io/GD-Documentation/GDJS%20Runtime%20Documentation/spriteruntimeobject.js.html#line87)

Your not searching in the right place. What you need is a general way to crop the image like you want in Js (maybe using a canvas?), Get a URL out of it (I think there is something like window.URL.ObjectInstanceURL() or something like that that could be a hint for the way to do it), inport it as pixi textures and switch the textures from a Sprite with placeholder ones with the ones generated with the cropping of the base image.

Ok, I’ll give that a shot.