3. Moving Sprites Around the Screen – An Endless Runner | Learning Cocos2d-JS Game Development

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning Cocos2d-JS Game Development

By : Emanuele Feronato

3.9 (11)

Learning Cocos2d-JS Game Development

3.9 (11)

By: Emanuele Feronato

Overview of this book

If you are a Java developer who wants to learn about Java EE, this is the book for you. It's also ideal for developers who already have experience with the Java EE platform but would like to learn more about the new Java EE 7 features by analyzing fully functional sample applications using the new application server WildFly.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Hello World – A Cross-platform Game

1. Hello World – A Cross-platform Game

Why should I make cross-platform games?

What Cocos2d-JS is and how it works

The structure of your Cocos2d-JS project

Hello Cross-World

Preloading and adding images

Removing images and changing the background color

Summary

2. Adding Interactivity – The Making of a Concentration Game

2. Adding Interactivity – The Making of a Concentration Game

Creating multiple instances of game assets

Adding a gradient background

Extending the Sprite class beyond its capabilities

Making assets react to clicks and touches

Changing sprite images on the fly

Shuffling the tiles and adding the score

Summary

3. Moving Sprites Around the Screen – An Endless Runner

3. Moving Sprites Around the Screen – An Endless Runner

Loading and placing graphic resources

Adding an endless scrolling background

Adding the spaceship

Controlling the spaceship

Adding asteroids

Asteroid versus spaceship collision

Invulnerability

Preventing the spaceship from flying off the screen

Adding particles

Summary

4. Learn about Swipes through the making of Sokoban

4. Learn about Swipes through the making of Sokoban

Loading graphic assets

Building a level

Detecting swipes

Completing the game

Summary

5. Become a Musical Maestro

5. Become a Musical Maestro

Choosing sounds

Preloading sounds

Creating a sound menu

Managing music and sound effects

Summary

6. Controlling the Game with Virtual Pads

6. Controlling the Game with Virtual Pads

Overview of virtual pads

First things first – the game

Summary

7. Adding Physics to Your Games Using the Box2D Engine

7. Adding Physics to Your Games Using the Box2D Engine

Before you start

Adding the Box2D engine to your project

Configuring the physics world

Adding bodies to the world

Updating sprite position as the world changes

Selecting and destroying world bodies

Checking for collisions among bodies

Summary

8. Adding Physics to Your Games Using the Chipmunk2D Engine

8. Adding Physics to Your Games Using the Chipmunk2D Engine

Adding the Chipmunk2D engine to your project

Configuring the physics space

Adding bodies to the space

Selecting and destroying space bodies

Checking for collisions among bodies

Using your own graphic assets

Summary

9. Creating Your Own Blockbuster Game – A Complete Match 3 Game

9. Creating Your Own Blockbuster Game – A Complete Match 3 Game

Setting up the game

Where to go now

Summary

Index

Index

Loading and placing graphic resources

You need to build the game over the blueprint created in the first chapter, so here is the content of the assets folder:

You can see the spaceship, the asteroid you have to avoid, a small circle to create particle effects, and the scrolling background.

You will spend some time trying to understand the background. As the game is 480 x 320 pixels, your background should be at least 480*2=960 pixels wide, which is made by two 480 x 320 seamless images.

With the following image, you will be able to give the player the possibility to fly through an endless cityscape:

All these images need to be preloaded by the loadassets.js file located in src, which will become:

var gameResources = ["assets/background.png","assets/ship.png","assets/particle.png","assets/asteroid.png"];

You also need to make some changes to main.js because this time you want a game in the landscape mode:

cc.game.onStart = function(){
  cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Cocos2d-JS Game Development

Search

Your notes and bookmarks