9 years ago by Joncom
Basically, I'm curious how CrossCode achieved their on-the-fly scaling effect:
9 years ago by Joncom
Now that I think about it a little... This could probably be done by simply scaling everything on the canvas by a factor of 2 or 3 (directly via the canvas context). Then tweening this scale factor back to 1.
However, this would affect everything on the canvas, GUI included. It would be cool to scale a game (the world, the entities, etc.), but leave the overlying GUI scale untouched...
However, this would affect everything on the canvas, GUI included. It would be cool to scale a game (the world, the entities, etc.), but leave the overlying GUI scale untouched...
9 years ago by Joncom
9 years ago by Joncom
Upon further contemplation, I suppose this really wouldn't be too difficult at all...
One could modify their game
The only trick would be to somehow flag your GUI entities as such, so that they are skipped during the first draw loop, and then picked up by the second one.
One could modify their game
draw function to first draw the game (its background-maps, entities, etc.), at whatever scale is desired, scaling directly via the canvas context. Then draw the GUI immediately after, at the default scale.The only trick would be to somehow flag your GUI entities as such, so that they are skipped during the first draw loop, and then picked up by the second one.
9 years ago by drhayes
That's a big reason I don't like the "enties as GUI" approach – too many exceptions around physics and drawing and collision detection.
They did such a good job with the smooth scale and the subtle motion blur, though. What a great effect.
I'll take a stab. I bet there's a WebGL-and-shaders way to do this but I don't know them at all, so... straight Canvas!
Gotta have an offscreen canvas where Impact draws and then another, visible canvas. That lets you do global post-processing. Like Joncom said, skip the GUI for the first pass.
If it really is straight canvas then global composite operation is probably your friend, along with the alpha in a PNG and maybe a bunch of white circle masks in increasing radii with a lighter composite? Or maybe the underlying masky thing is a bunch of rays coming from the center and our brains are fooling us into thinking it's discrete.
But looking really closely at that gif it sure looks like those pixels are getting discretely scaled to be bigger. Really nice effect. I dunno. ( =
They did such a good job with the smooth scale and the subtle motion blur, though. What a great effect.
I'll take a stab. I bet there's a WebGL-and-shaders way to do this but I don't know them at all, so... straight Canvas!
Gotta have an offscreen canvas where Impact draws and then another, visible canvas. That lets you do global post-processing. Like Joncom said, skip the GUI for the first pass.
If it really is straight canvas then global composite operation is probably your friend, along with the alpha in a PNG and maybe a bunch of white circle masks in increasing radii with a lighter composite? Or maybe the underlying masky thing is a bunch of rays coming from the center and our brains are fooling us into thinking it's discrete.
But looking really closely at that gif it sure looks like those pixels are getting discretely scaled to be bigger. Really nice effect. I dunno. ( =
9 years ago by Krisjet
The zoom isn't really that hard to do, but I'm interested in finding out how they did the blur. Looks like a focus blur/radial motion blur kind of effect to me. It might be WebGL and they're using shaders but if it's not I really have no idea how to do that kind of effect using just canvas calls. It looks super awesome!
9 years ago by lTyl
If they're using PixiJS, which is likely since they re-wrote a significant amount of the engine, then effects like these are trivial to implement. Pixi has built-in zoom support and an abstract filter class to easily build your own filters.
If not, it could be a transparent animated texture that fills up the screen that blurs any layers under it. If you look carefully, the blur effect stays centered as the camera moves. They seem to be very open devs, so maybe a tweet or a message will result in a future devlog? :D
If not, it could be a transparent animated texture that fills up the screen that blurs any layers under it. If you look carefully, the blur effect stays centered as the camera moves. They seem to be very open devs, so maybe a tweet or a message will result in a future devlog? :D
Page 1 of 1
« first
« previous
next ›
last »