Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • PhoneGap By Example
  • Toc
  • feedback
PhoneGap By Example

PhoneGap By Example

By : Andrew Kovalenko
close
PhoneGap By Example

PhoneGap By Example

By: Andrew Kovalenko

Overview of this book

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. It is one of the first and fastest spreading tools to develop hybrid applications using CSS, JavaScript, and HTML, without losing the advantages of native applications. If you are already a web developer, this book will provide you with the skills you need to create, customize, test, and deploy hybrid mobile applications. Starting from the beginning, this book will cover how to set up your PhoneGap development environment, add mobile web frameworks and plugins, design and customize the application layout, and utilize the embedded features of the PhoneGap framework. By working through the steps in each chapter, you will quickly master a variety of mobile applications with totally different approaches. You will then learn how to develop a PhoneGap plugin with native interfaces for iOS and Android, as well as common approaches to test PhoneGap applications. With ample screenshots that show you how to build a phenomenal application, PhoneGap by Example will ensure your success with this cutting-edge mobile development framework for hybrid applications.
Table of Contents (12 chapters)
close
11
Index

Preloading sprite


First, let's load our spheres.png sprite. It is important to load the sprite first to be sure that all pictures are loaded from the server before we start animations. We do not want to see our application without pictures. So, add these lines of code in the preload() function:

game.load.spritesheet("BUBBLES", "assets/sprites/spheres.png", BUBBLE_SIZE, BUBBLE_SIZE);

Where:

  • BUBBLES: This is the asset key. We reference to the sprite by this key.

  • assets/sprites/spheres.png: This is the path to the actual sprite file. It can be vertical, horizontal or a grid.

  • BUBBLE_SIZE: This is the width and height of the sprite. They are our constants with padding value.

Now, we can refresh the page and see that the file is loaded properly. First, we should go to Developer Tools | Menu | More Tools | Developer Tools. We can see it under the Network tab:

That is all about the preload() function.

bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete