Mode7

[gregmax17]

Does anyone know a good tutorial, or a step by step pseudo code at least, on how to do this using the canvas? Something like mario kart but the camera to be at a higher position.

 

Any help would be great, thank you!

[b10b]

I like all things Mode7, here's an example of such a game I made a few years back:

http://www.b10b.com/iondrift/epsilon/html5/

 

There are two or three different approaches to a Mode7 engine.  Per-pixel get and set is most versatile (x * y) but also slowest by far unless using a Shader.  For horizontal strip approaches, I found that rotating source texture once per frame is better than rotating each of the strips.  So intermediary canvases: original source, translated position cropped to view depth, rotated crop, finally multiple slices each scaled and offset.

 

Therefore, for mobile performance, this is one of the smarter approaches:

https://github.com/mariusGundersen/Origami3D/blob/master/Origami/OrigamiRender.js

 

However, for deployment to the wild, the maximum extents of the transformed canvas will vary per device - and for the closest strips the scaling can be significant.  So putting some additional checks and measures is necessary.   Generally iOS devices seemed to required much smaller Canvases than Android devices.

[totor]

maybe this could help : http://codeincomplete.com/posts/2012/6/22/javascript_racer/

[b10b]

Totor's link is great - I moved away from Mode7 approaches towards this Outrun-style psuedo-3D approach because it offers better performance, easier controls (and hills!).

It's not as versatile for non-racing games (e.g. golf games, or flight sims), but for 3D racers using Canvas it's a great choice.

I was able to add textured ground to my port of that engine without significant slow down, I can't share a link at this time as it was for a commercial project - but hope to share a link to an indie release soon.