For example, I have idle sprite and I have another files PNG where character is moving, so I need to change sprites on move and if yes how to do something like that(I have also asprite file but IDK how to use it, or IDK I must need plugin to load that)
PS i make that on phaser
I try do load without plugin but that doesn't work
Basically you would do the same for the moving sprite as for the idle animation. if you have multiple files, you would have to load all of them on preload (with different keys), generate the animations, and when you want to play the animation just call the play function on the sprite.
For details how the single steps work, check out this official example, it shows all steps needed. Execpt the loading from multiple file, but that is just adding one extra load line in the preload function
btw.: For more details with sprites checkout these animation/sprite examples, there all pretty good, and cover many different topics issues.
Related
I have just created my second interactive, Adobe Animate HTML5/Canvas project and I am very proud of it. The problem is, I know nothing about animating efficiently and conservatively when it comes to file formats, sizes, and excess data. I am wondering what steps I have to take to make this published HTML/Javascript project load without staring at a white screen for over a minute (please be patient, IT WILL LOAD EVENTUALLY). None of the Adobe Animate published code has been altered. I know I have to fix my images but do you guys see anything else that may speed this up other than adding a preloader?
http://weatherphases.epizy.com
I have run my page through PageSpeed Insights and still have no idea where to start. Let me know if you need screenshots, code, images, or any other information since I only have a link posted.
The majority of the load delay in your animation seems to come from loading images, with SpriteSheetUtils.extractFrame causing an additional delay. Your image sizes could be reduced by using something like tinypng to optimise them.
extractFrame is an expensive operation because it creates a new html image object and copies data from an internal canvas to it. The creators suggest replacing it with gotoAndStop in most cases: SpriteSheetUtils.extractFrame
flipbook created by createjs and preload js and it takes 15 min. to load the page.
it contains more than 300 images.
http://www.mentalimage.com.au/perkins/05/index.html
How can I resolve this problem?
You can get a little bit of filesize back by optimizing your pngs using something like ImageOptim.
There are also a bunch of duplicate frames. For example, the same open animation plays again when closing, so frames 30 & 70 are identical. You could reuse different frames to reduce this
However, the approach you have taken for your assets is not optimal. Building this as a full frame-by-frame image sequence is not ideal.
Consider animating separate pieces, so things like the people frames can only be exported once, and the page flip is a separate PNG sequence. Tools like Adobe Animate can help with this, and also export your content directly to an EaselJS library
You might want to use a video instead. A frame-by-frame animation is going to be VERY heavy, especially at the dimensions you are using.
Overall, I would recommend a different approach to your animation. If you don't want to rebuild it to be more dynamic, then video would be a better approach.
I am making a game that allows the player to link to their own gif images and immediately make them playable in the game, and need to convert animated .gif files into spritesheets.
I have a jsfiddle that will load any image you past into the input, but it only loads the first frame:
http://jsfiddle.net/40k7g0cL/
var animatedGif = PIXI.Sprite.fromImage('http://i.imgur.com/egzJbiI.gif');
But pixi.js asset loader can only seem to load the first frame of an animated .gif file and not the rest.
All the information I can find on this subject says I should convert the animated .gif file into a SpriteSheet ahead of time, however this is not possible because the player is going to be supplying the .gif images as they play, so I can not pre-process them ahead of time.
Is there an easy way to load an animated .gif image, having it automatically converted to a SpriteSheet or MovieClip or even an array of Texture objects?
If there is not a simple solution already in pixi.js, do I need to write my own plugin, perhaps using something like jsgif to process the .gif and separate each frame manually?
Any suggestions on how to go about generating a SpriteSheet from an animated .gif client-side in the browser (in javascript) could be useful.
Sorry, there is no way to achieve this directly with pixi.js.
As you suggest, it seems that jsgif is the only low-level implementation of gif for client-side javascript. Also, exists a fork of this called libgif-js, a little easier to analyze, and it can offer a clue for build the SpriteSheet.
The process to separate the frames would be:
Load the image data.
If your app is online, you have to use the File API (see here) to read local files.
You'll get an ArrayBuffer or String with the gif's raw data, that can be passed to new Stream(data).
Parse the data:
Call parseGIF(stream, handler). The second library can help a lot to understand this process.
Customize handler and callbacks to get what you need (width, height, frames...).
Create your SpriteSheet according to your rules:
If you chose save the frames as ImageData, use a hidden canvas (it can be the same that in the parse) to draw them in the right positions to form your SpriteSheet.
Take the final image and use it:
You can use, for example, canvas.toDataURL(*format*) (first, resize canvas to SpriteSheet dimensions) to get the image as a base64 url.
My webpage uses a lot (1000+) gifs and displays different gifs using 'if' and 'getElementbyId', would it run quicker if I dropped the if(map(x,y)!=0){... to change the scr and just used a gif which was transparent?
Googled to heck but it's a hard question to word, if a same/similar has been posted please point me there.
Many Thanks
First you said about getElementById which is a part of javascript - A client side scripting language, so that is not a big reason to be worried about.
You said 1000+ .gif images.
Use concept of Sprites in this case
This will allow you to download all your images in one go.
This will also reduce some of downloading burden from your server.
To work with sprite technology, Visit this link, I believe this is what you need.
Create an Object Pool with Images and load them on the initialization step. Load them in batches and extend pool with new images if required.
While loading images show spinner. It will be loaded long for a first time, after that a browser will put them in cache.
If you have an opportunity to combine different little images in one (sprite), do it! because it is faster to load one big image, then a lot of little.
For my game I need to animate the walking of a character/npc. I used to have many different .png images for every move, but can I put it all in one file? I'd like to avoid using .gif, because I need transparent background, so a .png file would be preferred. This isn't really crucial, but will just save me some time, and coding...
Yes, you can use one image to show several character animation states.
It works by creating a long image containing your states, and then placing it on the canvas so that only one state shows at a time. This should work for any image type that would be supported by the browser.
This game tutorial explains it: http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-2.html