I created an animation screen in javascript which is running about 20 frames per second. (I can do it faster, but 20fps is fine and have one eye on battery consumption.)
However, it can rain or get dark in the game, so I want to put a blue or grey hue over the scene.
The obvious idea is to have another canvas with a higher z value with the blue/grey hue on it. I can have that offscreen or onscreen depending on when it rains or gets dark.
Unfortunately, this is not a great solution as I need to capture touch/mouse events on the original canvas. This means the rain/dark/hue canvas would block the original canvas from receiving those events.
So is there any fast way of doing this? Again I want to keep an eye on battery consumption and speed. (I do not want to access and modify the image data of each pixel of the original canvas each frame.)
Is having the rain/dark canvas showing permantently but with transparent, blue or grey drawn once every 10 or so minutes (the typical gap between night/rain events). This could then capture the mouse events and the lower canvas has mouse/touch events turned off.
The only thing I do not like about that is when it is a clear day I would constantly have the gpu calculating colours for the screen when looking through a totally transparent canvas. That does not seem great.
If you really need to use 2 canvas, you can use the pointer-events: none CSS property so the clicks events go through the "filter" canvas.(Click through div to underlying elements)
If you are using a canvas library, there most likely is a layer system so you don't have to manage it by yourself.
Related
I was asking myself is there is a "more accurate mousemove" in JavaScript.
The normal event is fired when the mouse moves, but it's possible that it "jumps" over some pixels, so my question is if there's a way to detect every pixels that was crossed.
An application that could use this could be something like paint where you want to draw something (e.g. a stroke)
The mouse does not cross every pixel, though. Especially with touchscreens.
You can see this in Microsoft Paint. If you drag the mouse back and forth while drawing, you'll see that it is just guessing and drawing lines in between the points the OS is sending it.
If you need to handle every pixel, then take the last pixel you saw, and the current pixel, and have your code find all of the pixels that fall on a line between the 2 points.
Is it better to draw each Background Layer onto different Canvases and then move them around or is it better to redraw them each frame ?
I have to draw them on canvases since my Game is tile based and the background gets build from tiles.
By definition, parallax is 2+ images moving at different speeds.
So the general efficiency rule of "Put like-speed animations on their own canvas" applies.
For example:
Your background may move once every 3 frames.
Your characters may move every frame.
Savings == 2 background draws every 3 frames (quite a good savings!)
This is about WEB development, Canvas, HTML5.
I'm developping a paint application with HTML5 Canvas and JQuery. You can draw several layers, and you got a dynamic zoom with a magnifying glass effect.
The architecture is multiple canvas :
background :
canvas-bg
layers :
layer0
layer1
layer2
...
layerN
tools :
ghost (to display a "ghost" line when the user want to draw a line. Releasing mouse confirm the draw)
magnify-layer
My problem is the zoom. To get the effect I want I redraw ALL LAYERS on the magnify-layer. Of course, when you are drawing a 2000*2000 picture, it is VERY slow. Moreoften, you can move the magnify-glass to zoom everywhere, and the redraw is recall on MouseMoveEvent.
To get it faster I only draw the little area under the glass (instead of entire layer). But it's still slow. How can I speed up know ?
illustration : http://imgur.com/hAtYsZi
You can see in the black circle the area is zoomed.
I used this code to start :
Démo : http://www.script-tutorials.com/demos/167/index.html
Try this...it might help.
I'm guessing you're doing traditional "magnifying": you're displaying at reduced resolution and then "magnifying" at full resolution.
So, when the user selects the magnifier tool, "flatten" all your layers onto another canvas.
Then cache the flat canvas to an image at 1/2 resolution. This becomes your unmagnified background.
Finally do your magnifying trick: Grabbing the appropriate pixels from the flattened canvas and show them in a floating magnifier.
Yes, there is some overhead+time in flattening your image, but that might be offset by the time it takes the user to select and position the magnifier.
I am experimenting with HTML5 Canvases in an attempt to create some animation. My ultimate goal is to be able to animate a box to a particular location at whim, for now im just animating it across the screen. When I move it across the screen I geta black trail left behind, how do I clear this "dirty" section without removing the background grid?
A jsFiddle of the code is here
Two solutions
Redraw the background on the top of animation before moving it to the new location. This so called dirty sprite technique - faster - more complex.
Redraw the whole canvas between frames
If drawing the background is a complex operation just hold a prepared background buffered in another canvas for speed.
You have to clear what you've drawn if you don't want it to be visible. I assume you don't want to clear entire canvas to avoid redrawing grid and spending CPU cycles. You'll have to do this differently.
Possible solutions:
have two same onscreen canvases one over the other. Draw grid on canvas below and don't clear it. Clear part of top canvas and redraw on it.
have one on-screen and one off-screen canvas. Draw grid on off-screen canvas. Each time you animate, clear whole on-screen canvas, copy prepared grid from other one, and draw what you need over it.
I need to achieve something like this for my website: Flash Rain Effect
Is that possible to do in Javascript? I want it to be just as smooth as it is in Flash.
Another flash rain drop water effect
Yes, it's possible: http://www.lab4games.net/zz85/blog/2010/03/10/rain-water-ripples-with-html-canvas-javascript-jquery/
Smoothness is something relative, and you may not be able to have the same performance as hardware-accelerated Flash. With that said, more and more browsers are starting to incorporate native hardware acceleration (Direct2D and otherwise).
You should be able to do this using a combination of JavaScript and canvas elements (HTML5).
If you don't want to use the Canvas (or can't) you can do that by creating an image that looks like a rain drop, make it a PNG with alpha transparency so the non-drop parts of the rectangle don't show up. Then you create 200 or so IMGs programmatically and position them absolutely (and randomly) over your scene. Each one gets positioned, then turned visible for a few milliseconds, then turned invisible, then rinse and repeat.
For variety you can either make images of different sizes and shades so some seem in the background and some in the foreground, and vary those.