Kind of a dilemma here. I am making a mobile version of a website, that has some interactive things more specifically I have this object in 3D that you can spin, I was using papervision in Flash but now I need to do this differently since there is no flash in mobile and I feel I am on thin ice.
I was thinking of exporting a 360 degree spin # 30 FPS using a PNG sequence with alpha channel, and then simply stiching them together into a sprite, then using this as a background in CSS and using background-position to then "simulate" an animation.
That or simply switch source image very rapidly, or somehow using "canvas" maybe, the thing is I am not sure if this will produce completely subpar performance? I mean switching the background-position or image source file # 30 FPS is that even possible? Would it be smooth, or is this simply something that is not feasible todo yet? Keep in mind it's just one single 3D object that needs to spin based on user input, not any other interactive elements.
So is sprite the way togo or canvas or something cool I havent even heard of? Thanks everyone in advance!
If I was making a mobile version of a website, I would strip it of most of the graphics and definitely of all the animated gifs, flash, etc. -- people using mobile phones for browsing the web are usually not after the multimedia experience -- they just need some information quickly and use a suboptimal device with poor bandwidth and even worse display and performance to get it. Don't make it even harder for them.
On the other hand, I found that using a background image with all the frames of animation in it, and manipulating the background-position from javascript is a fine way of making small animated sprites, for example for a simple javascript game for mobile phones :)
Related
I've just received a request from a client to build a website which I guess needs HTML5 canvas to be deployed. For you to have an idea it is a kind of train with different cars. Visitor should be able to scroll left and right along the train and click on the windows to show different contents (in a pop up or stand alone window).
I'm quite new to Canvas but feel comfortable with HTML, CSS and javascript/jQuery, so I believe I could give it a try. I'd love to know though whether there's an active (maintained as for 2017) canvas framework to start from for the before mentioned needs. I've already checked around i SO but replies go back to 2012 with answers recommending outdated/unmaintained libraries. A good complete gallery of samples would do too.
It should work both on computer and mobile OSs.
TIA. Have a nice day,
hip
or a reliant to start from
This should be easily doable without canvas, some animation libraries like GSAP.
You can design an SVG for the train , and make it scroll left or right inside a div as per mouse or touch-input, and handle all the animation using GSAP
though, I'd recommend Fabric.js for canvas based events and animations.
How can I create animated stylized text, as well as some other animated graphic elements such as seen in this video around 1:21: https://vimeo.com/69200399
Can anyone help me start off, not help with a full code but just with things to research.
There are a lot of ways to do this, but I think you should look into SVG. It will render natively in-browser so will be of high quality. None of the elements you're referencing have much complexity... just shapes. The animation can be done via script. There are also some tools to help you with animation tweening if that's the route you go.
Another way is to use a tool such as Adobe After Effects and render a video. Then, you can use whatever effects you want and you will have a guaranteed look at the end. The downside is that you won't be able to adapt to different screen resolutions, and the quality won't be as high because the animation will be rasterized before anyone sees it. If you need transparency on the video, look into VP9 with alpha channel.
I am trying to make my website a live background of space. I am attempting to get the stars to spawn on the left of the screen and slowly move over. And occasionally their will be stars that come in from other directions. My question is, how should I go about doing this?
Would it be smartest to make a Javascript, script that would make a LOT of <div>'s and then move them all randomly? Or would it be smartest to use a canvas? I've never used a canvas before so I don't know all it's uses yet.
Here's a link to the effect I'm trying to emulate (It's a YouTube video with music) - https://www.youtube.com/watch?v=y8MsE-4dygY&list=PL21A7A915E7020E73&index=16
I'm trying to emulate what the stars or partices are doing in the background of that video, so how should I go about this? (I'm not asking for all the code, I'm just making that clear.) Thanks in advance! :)
well, you can obviously use a Parallax background with some overlays for an easy effect, but you can go further by using any of the many scripts out there, search Google for that. Or you can learn how to do it via scripting with this great tutorial that makes use of HTML5 and CSS3
Canvas may be more performant than adding lots of divs as you won't need to create a large DOM tree. DOM operations are expensive and can cause memory thrashing if you repeatedly create and destroy lots of elements. Using multiple overlaid images and CSS3 translate transitions should be more performant still, but may make it harder to achieve all the effects that you want - randomized movement, separation of stars on the same plane, etc. etc.
I am planning on creating a real-time multiplayer platformer game in HTML5 using javascript. After searching about 4 hours on the webs, i couldn't find an up-to-date answer on the eternal question: rendering my game with DOM will be faster than rendering it inside a canvas? The game will be the whole document. 2/4 players will be jumping on the map and will shoot at each other, bombs will explode. So? What will it be. I remember I made 2 years ago a draw application with DOM and it worked kinda smoothly, but i guess canvas speed is better nowadays? Thank you guys.
P.S. I think of using Dart too.
I use canvas, and would say to do the same since it's a direct drawing mode. However, you should absolutely make sure it is forced into hardware acceleration wherever possible. You do this by setting the style of the <canvas> element into transform:translateZ(0); (or different browser interpretations of that, e.g. -webkit-transform:translateZ(0);). Manipulating the DOM can be slow now that canvas is closer and closer to native code, especially with simple methods to get the most performance out of it.
My games seem to do pretty well on different platforms with this - not universally well on every single platform (older Android OSes lag, but their JS & browser rendering engines weren't that fast to begin with), but quite well on many platforms.
Canvas is the best choice for the type of game you are describing, but some DOM elements are still very useful even using canvas, for example, asking the player's name, or creating a menú or profile section inside the game. You can render a div with absolute position on top of your canvas when you need to display DOM elements, and do all the "game stuff" like drawing and animate sprites in the canvas element.
The reason why Canvas is the best choice is simple. I'm pretty sure that you can't or it would be really hard to do things like this without the canvas element:
http://galloman.github.io/ss2d/samples/skeletons2.html
More at: http://ss2d.wordpress.com/support/
Coming from the backbone side of web development we are trying to find a solution for a request to add visual and sound effects to our task management web application.
For starters - we are looking for a way to create an exploding stars effect like you see in games.
Can this be done with HTML5 canvas?
Should we use flash?
Any ideas how to start?
By now, just about anything Flash can do visually can be done by the HTML5 canvas on modern browsers.
For a 'star burst' visual effect, it sounds like a simple matter of creating a random array of objects that move away in random pre-set directions every time the canvas updates.
Example: http://jsfiddle.net/amDAW/ (click on the canvas to create a starburst)
As for sounds, this isn't handled in the canvas, but rather either the Audio tag or the fairly new WebAudio API. If you go with the former (more browser support), your biggest concern will be with resource preloading, but there are some helper libraries that can abstract this away (shameless advertising: https://github.com/jsweeneydev/ResourceLoader).