Framework: Phaser.js version 3
Symfony 5
Langage: Javascript,
HTML5,
CSS3
Hello, I'm learning Phaser.js 3; I would like to create smooth animations (25fps) with lots of frames in my spritesheet. Is it possible to use large spritesheets to create animations without writing the name of each frame each time? If I have 230 frames, I cannot write the name of each frame... Thank you in advance for your answer
Yes it should be possible, you can generate the names with generateFrameNames or generateFrameNumbers, here is the link to the documentation, and here an example.
Or you can use a configuration file (json) to define the animations, like shown in this example.
for this there are texture packer tools, for example this one http://free-tex-packer.com/, that can help.
btw.: If you want smooth animations, and havn't created the spritesheets already, may be (spine-)bones animations might be a easy and space saving option, here is two example from the official website http://phaser.io/examples/v3/view/spine/basic-spineboy and http://phaser.io/examples/v3/view/spine/batch-test
Here a short video highlights the benefits of bones for phaser games https://www.youtube.com/watch?v=sq6mnix8eAg , it is very basic and not very technical
Related
Is there a way to display so many images ? Maybe something like google maps, that would show all images at once as tiles and you could zoom in and see the picture in detail... ?
This problem can be easily solved by merging all images side by side like a collage.
This task can be automated by using python using its pyautogui module and any simple software for image manipulation.
By doing this a single image of very high resolution can be obtained achieving your purpose.
(Although the size of the image would be mind blowing.)
See these sites for similar works (1.2 Billion images) but with smarter solution (the are loading few images at a time upon zooming).
All 1.2-Billion Facebook Profile Pictures On One Page
The Face of Facebook
Ok, it took very long time to process and finish, but I made it ! It CAN be done. correct tools are libvips and its python version pyvips I managed to get all 366 000+ pictures in one, and then made zoomable pyramid dzi with it ! To display it OpenSeadragon since the final picture was 81GB and nothing can open that.... http://deepzoom.reverz.sk/ ( also not sure why my question was down voted :-/ )
I'm wanting to create retina sprites to support #1x, #2x, #3x, #4x retina displays. I'm using Codekit, hooked up to an external version of Compass. I've tried a few plugins out:
https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass
https://github.com/Gaya/Retina-Sprites-for-Compass
which allow for the easy creation of #1x and #2x, but I can't find a simple solution for creating the other sizes.
I'd like to be able to include the sprite on any class or pseudo class rather than generating a separate sprites stylesheet or block of CSS.
In an ideal world, all the sprites would be on one spritesheet as I don't think I'll be using any javascript to preload and I'd like to have as few HTTPs requests as possible
Thank you for your time,
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
I am looking for some simple library for javascript to manage animations.
I need something realy simple, just to "parse" animation to frames. I want to handle everything by myself, i want just to know, how many frames is in animation and how to get the frame i want.
I did some digging on google, i found one which is realy nice (sprite.js) but it is too big and it will force me to rewrite my app.
Is there simple lib, or a tutorial how to work with animated images? (gif and others).
There is no straight way to get single frame from gif in JavaScript.
I am developing an application for viewing images.
I used the example of PhotoScroller Apple to implement this application.
In my application I want to be able to draw on the image.
I had the idea to put a UIView on top with transparent background and draw the lines via touch events. This solution has become very slow because the generated images are very large, around 3700x2000 pixels.
I also tried a solution with the example of Apple GLPaint that uses OpenGL, but it has a size limitation of 2048x2048 pixels.
Anyone have any idea or example of how I implement this?
I think you should try and tile your image.
One option is using CATiledLayer. Have a look at this short tutorial.
Or you could try and use CGContextDrawTiledImage to get your stuff done. Possibly this post from S.O. could help you getting started.