Here are some thoughts on the current App ‘situation’ and how the next generation of apps might or could look like by taking ideas from old/bad apps:
(NOTE: In this article I am NOT talking about Games or Gaming Apps, for those it looks kind of different)
Let’s face it: “There is an app for everything!” – However looking at the two major App Stores, iTunes and Play, there are serveral types of apps.
Now the division of those apps are not backed by any statistics and are only based on my perception of the appstores and my experience browsing through the stores:
| A Apps
||Quality/Polished Apps, developed by backed/bigger companies
| B Apps
||Niche Apps by ‘small’ developers/indie devs that do generate some revenue
| C Apps
||Innovative/Useful Apps that are either unknown or badly executed
| D Apps
||‘Crappy’ Apps that are either badly executed, a bad copy of another A-App or have just no real use whatsoever
In this 5th and for the moment last part of my series on creating an html5-canvas-game I’m going to write about adding animations and other elements to polish up the game a little bit.
The 4th part of my series on creating an EaselJS-Game is about adjusting the game to different display-sizes, which is very important when targeting mobile devices. To visualize, what the result is going to look like – I added the following two iframes, to demonstrate how the game adjusts to a different screen-/stage-size.
Open this http://demos.indiegamr.com/jumpy/part4/index_nearestNeighbor.html in a new browser-window and see how it adjusts to your window-size as you reload the page after resizing the window.
This is Part 2 of my tutorial on How to create a Runner Game for mobile with EaselJS – in this part i’m going to cover the collision-detection between two objects in EaselJS.
Types of Collision Detection
There are several types of collision detection methods, I’m going to explain two of the most commong ways to detect a collision – if you want more/detailed information on the subject I would encourage you to google for it or try this article as an introduction to the topic.
1) Distance Based- or Circle-Collision
This is probably the simplest type of collision detection. What you basically have to do is to set a collision-radius for each object, then calculate the distance between the objects and see if the distrance is lower than the radii combined. However the following image shows, that this kind of detection won’t be suitable for our platform game:
Editors Note: The tutorial is a little bit outdated now, but it still works. However if you would like to learn more on this topic and get a more detailed verison plus all the extras and resources, you should check out my ebook: From Zero to the Appstore – Blueprints for an HTML5 Game.
Here I’m starting a series of 4 articles on how to create a small game with EaselJS that “can” run on your mobile device (unfortunately it won’t run on all mobile devices) – however I also plan on a future posting on how to use technologies like cocoonJS to create a WELL-PERFORMING native app from this.
The FINAL result
The result is going to look similar to this (but with better code!) – In case you take a look at the source-code: This is NOT a good example on how to code cleanly – I did this as a quick mashup to try out a few things. – You can also do another jump, while in the air:
To test this on your mobile device, point your mobile browser to: http://demos.indiegamr.com/jumpy Continue reading