Online Book Reader

Home Category

HTML5 Canvas [200]

By Root 6600 0

var intervalTime = 1000/FRAME_RATE;

setInterval(runGame, intervalTime );

}

//*** new FrameRateCounter object prototype

function FrameRateCounter(fps) {

if (fps == undefined){

this.fps = 40

}else{

this.fps = fps

}

this.lastFrameCount = 0;

var dateTemp = new Date();

this.frameLast = dateTemp.getTime();

delete dateTemp;

this.frameCtr = 0;

this.lastTime = dateTemp.getTime();

this.step = 1;

}

FrameRateCounter.prototype.countFrames=function() {

var dateTemp = new Date();

var timeDifference = dateTemp.getTime()-this.lastTime;

this.step = (timeDifference/1000)*this.fps;

this.lastTime = dateTemp.getTime();

//console.log("step=",this.step)

this.frameCtr++;

if (dateTemp.getTime() >=this.frameLast+1000) {

ConsoleLog.log("frame event");

this.lastFrameCount = this.frameCtr;

this.frameCtr = 0;

this.frameLast = dateTemp.getTime();

}

delete dateTemp;

}

Your browser does not support HTML5 Canvas.

What’s Next

Throughout this entire book, we have used game- and entertainment-related subjects to demonstrate canvas application building concepts. Over these last two chapters, we’ve sped up the game discussion and covered many game concepts directly by creating two unique games and optimizing a third with bitmaps and object pooling. In doing so, we have applied many of the concepts from the earlier chapters in full-blown game applications. The techniques used to create a game on Canvas can be applied to almost any canvas application from image viewers to stock charting. The sky is really the limit, as the canvas allows the developer a full suite of powerful low-level capabilities that can be molded into any application.

In Chapter 10, we will look at porting a simple game from the canvas into a native iPhone application.

Chapter 10. Mobilizing Games with PhoneGap

Going Mobile!


Nowadays it seems that everyone is making, planning to make, or thinking of making applications for mobile devices. Mobile is the next great (or maybe actually the current) place to make money by selling applications. The Apple iPhone is currently one of the most popular personal communication devices, and the iTunes Store gives budding application developers a place to show and sell the fruits of their labor. Apple separates their application-development platforms into three categories: Desktop (OS X), Browser (Safari), and iPhone/iPad/iPod Touch (iOS).

Most iOS applications, especially games, are written in Objective-C and compiled directly to the platform using the Xcode IDE. This is a large barrier to entry to develop native applications, as Objective-C is not widely used on platforms other than Apple devices. Up until early 2010, Objective-C/Xcode was the only viable development system for targeting iOS development.

In this chapter, we will “port” our HTML5 Canvas application to the iPhone using a technology called PhoneGap. PhoneGap allows an HTML application to run natively on an iPhone by packaging the application as a Safari Mobile “app.” This app can be run from the iPhone interface, and it will look and act like an app compiled in Objective-C. Applications packaged with PhoneGap can even be sold in the iTunes Store.

NOTE

Other third-party tools can be used to create iOS applications and games. For example, Unity (http://unity3d.com/) is a powerful game-development platform that can target iOS. In addition, there are tools such as Ansca’s Corona SDK (http://www.anscamobile.com/) that use scripting languages to harness the power of the platform.

Introducing PhoneGap


PhoneGap is an open source development tool created by Nitobi (http://www.nitobi.com) that acts as a software bridge between standards-based HTML development and several mobile platforms. Using PhoneGap, the HTML5 Canvas developer has access to the various hardware APIs for supported devices through an abstraction layer. This software interface allows the same code

®Online Book Reader