Best technique for topdown RPG-esque grid based scrolling? - javascript

browser-based application, currently running on php/js/html5, jquery the only framework I'm using.
If I've got enough 64x64 images to fill up my screen about 100x, what technique would you recommend to move the images so that it looks like it's scrolling?
Think oldschool top-down RPG's if you will.
What I'm currently considering:
HTML5 Canvas
array1 with all the images, array keys being coords for each image
array2 with just the images currently on the screen
when moving to the left:
move all images 64px to the right (so that it moves in increments)
fetching the lacking images from the array1, stripping the ones that dropped off the screen
removing the images that dropped off the screen from the canvas
It's not an actual game, but that is the effect I'm trying to achieve.
I'll take any hints/tips I can get for this; from "use html tables instead of Canvas" to "impossible to streamline this for the web".
My main concern: speed. I'd like to be able to zoom out as well, to the point where I'd be using a LOT more images on the screen (32x32, perhaps even 16x16) but I'm aware that browser-based applications might not be up to that task.

I suggest using the MelonJS framework to handle this for you. It can use maps from Tiled Map Editor, which is just plain awesome.

Related

Photo Booth like backdrop effect in js

I'm looking for this particular effect, like green screen, but without a green screen :P
So, you set a camera at a fixed place, then you take one photo that will be the "green screen" so you doesn't really need one.
Any plugin, easy-way, to do it with canvas/webgl?
Seriously.js is really nice, but only work's with a green background or a fixed color
Thanks!
Simply check each pixel against the "green-screen" image and and if they're equal by some threshold make them transparent, or set them to what ever you want.
Depending on the resolution of the image you want to process, using a normal canvas(2D) will probably be too slow to do this.
If you would like to process video content in "realtime" you would need to go with a webgl approach with a simple glsl shader.
I dont know of any libraries doing this for you. Using the canvas approach should be fairly simple, using webgl you would need to learn some webgl using framebuffers, textures, basic geometry rendering(a library like threejs could handle the aforementioned) as well as some basic glsl.

How could I go about getting this animated background effect?

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.

HTML5 deep zoom and moving objects

I'm prototyping a web application that needs to be able to show moving objects on top of a background drawing. The objects are fed their positions through WebSockets, which works well.
As long as the the background is fairly simple, there is no problem. I've successfully used both Canvas and SVG to accomplish this.
To the problem: When the complexity of the background increases (i.e. file size increases), it doesn't really work anymore. It takes too long to load, to zoom and to pan. I've tried a deep zoom implementation (http://www.akademy.co.uk/software/canvaszoom/canvaszoom.php) which works OK, but there are two problems:
I can't seem to be able to generate (Deep Zoom Composer) a deep zoom tiles that are zoomed deep enough. The top level is very far away, which is unnecessary. The image that I use to generate the tiles is of very high resolution.
I keep my moving object on another canvas on top of the background canvas. How do I get the zoom levels in sync? How do I know much is one "level" percentage wise?
I don't necessarily need to use deep zoom, but I believe it needs to be some kind of server based technique, to keep the size down which is sent to the client.
By the way, the background is originally a DWG file and the solution must be plugin-less (no silverlight, flash or similar).
Thanks!

Between SVG and canvas, which is better suited for manipulating/animating several images? Maybe neither and just use css3 transforms?

The 2nd part of the question is, which javascript library is better/easier to manipulate images with? I won't be actually drawing any shapes or anything. Other info: I'll be using jQuery and don't need to support all browsers, just webkit.
Edit:
More information: the current design is to layout/draw several rows/columns of images in a grid-like layout, with the image in the center being in "focus" (a little larger, with a border or something and some text next to it). The tricky thing is that we want the whole canvas of images to appear to slide/glide over to bring another random image into focus. So obviously the number of images in this grid needs to exceed what is visible in the viewport so that when the transition occurs there are always images occupying the canvas. Other than moving the images around, I won't be blurring them or otherwise modifying them. Eventually we will add user interactions like clicking/touching on a visible image to bring it to focus manually.
Let me know if this is not clear or still confusing.
I ran across scripty2 which seems like an alternative to using canvas/SVG for my purposes. I also started farting around with EaselJS last night, and it seems like this might work, but I'm wondering if it'll end up being more work/complex than just using standard HTML/CSS and a tool like Scripty2 to aid with animations and click/touch events. Just looking for any suggestions. Thanks!
The answer depends on your manipulation and animation.
If it's just translations, CSS wins for speed compared to canvas. I haven't tested, but I feel confident it easily beats SVG for the same sort of thing.
If you're going to be doing non-affine transformations or otherwise messing with the images (e.g. blurring them) you clearly want Canvas.
If you need event handlers per object, you clearly want a retained-mode drawing system like SVG or HTML+CSS. I haven't done enough CSS3 transforms to say how they compare in terms of speed to SVG, but they clearly do not have the robust transformation DOM of SVG.
This is a rather subjective question (or suite of questions) and you haven't yet given sufficient information for a clear answer to be possible.

Animating image/3D/sprite with javascript/css3/canvas

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 :)

Categories