I am going to share a neat little trick that was learnt while working on an HTML5 game recently. The game is pretty much like our HTML5 Doodle Jump. We had to make sure that the game scales down very well on smaller devices like mobiles, ipads, tablets, etc. and in the process learnt a neat trick to scale the entire canvas across all devices consistently.
Continue reading “Scaling Your HTML5 Canvas to Fit Different ViewPorts (or Resolutions)”
Tag: html5
Games Physics: Basics and Implementation of Predictive (or Continuous) Collision Detection
Few days ago, I wrote a post about why time based animations are better than frame based animations. However, in animations done as a function of time, some serious problems could arise. One of them is that your regular collision detection techniques might fail if the frame rate is lower than acceptable. Your object might pass through the walls or even fall through the floor!
Time Based Animations in HTML5 Games: Why and How to Implement them
So you got into Web Based Animations or Games (using that HTML5 thingie) and chances are high that you’re relying on setInterval, setTimeout or even better – requestAnimationFrame to reflow and repaint your frames (fancy terms for rendering each animation frame). Precisely, you’re basing your animations or game mechanics on the frame rate. There’s nothing wrong with that, but let me show you a more sophisticated approach which can actually enhance all sorts of user experience – time based animations.
Continue reading “Time Based Animations in HTML5 Games: Why and How to Implement them”
Controlling the Frame Rate with requestAnimationFrame
Limiting the frame rate while using requestAnimationFrame can be a common want especially when coding Games where you want your animations and mechanics to not exceed a particular mark of frames per second. Let’s go through 2 ways of doing it.
Continue reading “Controlling the Frame Rate with requestAnimationFrame”
Optimizing HTML5 Canvas to Improve your Game Performance
So I coded a game this month for the github game compo called “Pappu Pakia“. This is my first HTML5 Game with beautiful graphics by Kushagra. When I was finished with the coding part, it was pretty exciting until I played it a few times when my CPU was busy, then on an old laptop and finally on a mobile device. In all the cases it was laggy, except in the last one where it was super slow. So what do we do now ? Time to Optimize!
Continue reading “Optimizing HTML5 Canvas to Improve your Game Performance”
Rendering Animations with Moving Objects on Canvas
Moving objects on HTML5 Canvas is really easy. I should have written on this topic before writing on gravity but it’s never too late! Let’s get started with the basics.
Continue reading “Rendering Animations with Moving Objects on Canvas”
Different Tools for Our Sketching Application
It is important for our painting application to have different tools like:
- Line tool to draw straight lines.
- Rectangle tool to draw rectangles.
- Circle tool to draw circles.
- Eraser tool for erasing purposes.
- Color tool to choose colors.
- … and more
We have already built our pencil tool in previous parts. In this part, we’ll focus on creating the aforementioned tools.
Continue reading “Different Tools for Our Sketching Application”