Cocos2d-x C++ Windows 8 &Windows Phone 8

67
Cross Platform Game Programming with Cocos2d-x (Windows 8) SoCal Code Camp - 15 November 2014 Troy Miles

description

In the first of two sessions, we will explore using Cocos2d-x, a free and open source game engine. It runs on Windows, Mac OS X, and Linux and builds games for every popular phone, tablet, and desktop platform. It uses C++ to get close to metal performance and a smart and logical set of classes to make it easy. Don't let the C++ scare you off. We are using Cocos2d-x to create fun platform games, not building complicated financial software. So long as you know at least one curly brace language you will be able to write Cocos2d-x style C++. We will explore how to install Cocos2d-x. How to build the test apps and finally how to build your own apps specifically for Windows 8 and Windows Phone 8, but the code will run on iOS, Mac, and Android too.

Transcript of Cocos2d-x C++ Windows 8 &Windows Phone 8

Page 1: Cocos2d-x C++ Windows 8 &Windows Phone 8

Cross Platform Game Programming with Cocos2d-x (Windows 8)SoCal Code Camp - 15 November 2014 Troy Miles

Page 2: Cocos2d-x C++ Windows 8 &Windows Phone 8
Page 3: Cocos2d-x C++ Windows 8 &Windows Phone 8

Who am I?Troy Miles

Wrote a few hit computer games in the 80’s and 90’s

[email protected]

https://github.com/Rockncoder

http://www.slideshare.net/rockncoder

@therockncoder

Page 4: Cocos2d-x C++ Windows 8 &Windows Phone 8
Page 5: Cocos2d-x C++ Windows 8 &Windows Phone 8

Cocos2d-x: Introduction

Page 6: Cocos2d-x C++ Windows 8 &Windows Phone 8

What is Cocos2d-x?

Open source game engine under MIT license

It is optimized for 2D graphics using OpenGL

Used by more than 400,000 developers worldwide

Page 7: Cocos2d-x C++ Windows 8 &Windows Phone 8

History

2008 Ricardo Quesada in Argentina creates Cocos2d

Ported to iPhone with the opening of the iPhone App Store

2010 Zhe Wang in China branches it creating Cocos2d-x

2013 Ricardo joins Cocos2d-x team

Page 8: Cocos2d-x C++ Windows 8 &Windows Phone 8

Target Platforms

Windows Phone 8+

iPhone 5+

Android 2.3+

Windows 7+

Mac OS X 10.6+

Page 9: Cocos2d-x C++ Windows 8 &Windows Phone 8

Development Platforms

Windows 7+, VS 2012+

Mac OS X 10.7+, Xcode 4.6+

Ubuntu 12.10+, CMake 2.6+

All platforms need Python 2.7.5 (not 3!)

Page 10: Cocos2d-x C++ Windows 8 &Windows Phone 8

Development Languages

C++

Lua

JavaScript (all except WP8)

Page 11: Cocos2d-x C++ Windows 8 &Windows Phone 8

Why C++?

It is the most popular game programming language

It is universal

It is fast

It really isn’t that hard

C++ 11 makes it even better

Page 12: Cocos2d-x C++ Windows 8 &Windows Phone 8

Mandatory Tools

In order to build iPhone apps, you need Xcode

In order to build Windows Phone apps, you need Visual Studio

Page 13: Cocos2d-x C++ Windows 8 &Windows Phone 8

Titles using Cocos2d-x

Page 14: Cocos2d-x C++ Windows 8 &Windows Phone 8

Text

Avengers AllianceMarvel Entertainment

Page 15: Cocos2d-x C++ Windows 8 &Windows Phone 8

Text

Family Guy: The Quest for StuffTinyCo, Inc.

Page 16: Cocos2d-x C++ Windows 8 &Windows Phone 8

Diamond DashWooga

Page 17: Cocos2d-x C++ Windows 8 &Windows Phone 8

Star Wars: Tiny Death StarLucasArts

Page 18: Cocos2d-x C++ Windows 8 &Windows Phone 8

BADLANDFrogmind

Page 19: Cocos2d-x C++ Windows 8 &Windows Phone 8
Page 20: Cocos2d-x C++ Windows 8 &Windows Phone 8

Key Points

Cocos2d has been around since 2008

Cocos2d-x uses C++ for speed

A lot of big name titles use it

It has always been free and always will be

Page 21: Cocos2d-x C++ Windows 8 &Windows Phone 8

Cocos2d-x: Installation

Page 22: Cocos2d-x C++ Windows 8 &Windows Phone 8

Windows Development

Python 2.7.5

Visual Studio 2012+

Windows Phone SDK 8

Page 23: Cocos2d-x C++ Windows 8 &Windows Phone 8

cocos2d-x.org

Tutorials

Forum

Blog

Downloads

Page 24: Cocos2d-x C++ Windows 8 &Windows Phone 8

Download & Installation

http://www.cocos2d-x.org/download

Click “Looking for an older version?”

Click “v3.2 Jul. 18, 2014”

Unzip it

Page 25: Cocos2d-x C++ Windows 8 &Windows Phone 8

v2 vs v3Current version is 3.2, 3.3 is in beta

Version 3.0 is a re-write using C++ 11

Many V2 classes have been deprecated and renamed

Updated directory structure

Better command line tooling

Drops Xcode templates

Page 26: Cocos2d-x C++ Windows 8 &Windows Phone 8

Windows 8 PathSettings -> Control Panel -> System -> Advanced system settings

Environmental Variables…

System variables modal

Path

Edit...

Add "[cocos2d-x root]\tools\cocos2d-console\bin\"

Page 27: Cocos2d-x C++ Windows 8 &Windows Phone 8

Running C++ Tests

Open file "cocos2d-wp8.vc2012.sln" in build directory

Make cpp-tests the StartUp project

Compile and run

Page 28: Cocos2d-x C++ Windows 8 &Windows Phone 8

Key Points

Cocos2d-x version 3 was a complete re-write

Installing cocos2d-x on windows is pretty easy

Getting the C++ Test app to compile and run is essential

Page 29: Cocos2d-x C++ Windows 8 &Windows Phone 8

Cocos2d-x: Feature Overview

Page 30: Cocos2d-x C++ Windows 8 &Windows Phone 8

Widgets

Button

CheckBox

ListView

Slider

TextField

Page 31: Cocos2d-x C++ Windows 8 &Windows Phone 8

Audio

Sound effects

Background music

CocosDenshion library (Open AL)

Support audio is platform dependent

Page 32: Cocos2d-x C++ Windows 8 &Windows Phone 8

PhysicsChipmunk2D

Portable 2-dimensional real-time rigid body physics engine

Written in C99 by Scott Lembcke

Box2d

Free open source 2-dimensional physics simulator engine

Written in C++ by Erin Catto

Published under the zlib license

Page 33: Cocos2d-x C++ Windows 8 &Windows Phone 8

Network

HTTP + SSL

WebSocket API

XMLHttpRequest API

Page 34: Cocos2d-x C++ Windows 8 &Windows Phone 8

User Input

Touch/Accelerometer on mobile devices

Touch/Mouse/Keyboard on desktop

Game controller support

Page 35: Cocos2d-x C++ Windows 8 &Windows Phone 8

2D GraphicsTransitions between scenes

Sprites and Sprite Sheets

Effects: Lens, Ripple, Waves, Liquid, etc.

Transformation Actions: Move, Rotate, Scale, Fade, Tint, etc.

Composable actions: Sequence, Spawn, Repeat, Reverse

Page 36: Cocos2d-x C++ Windows 8 &Windows Phone 8

2D Graphics

Ease Actions: Exp, Sin, Cubic, Elastic, etc.

Misc actions: CallFunc, OrbitCamera, Follow, Tween

Particle system

Skeleton Animations: Spine and Adobe DragonBone

Fast font rendering using Fixed and Variable width fonts

Page 37: Cocos2d-x C++ Windows 8 &Windows Phone 8

2D Graphics

TrueType fonts

Tile Map support: Orthogonal, Isometric and Hexagonal

Parallax scrolling

Motion Streak

Render To Texture

Page 38: Cocos2d-x C++ Windows 8 &Windows Phone 8

Right handed coordinate system

Different than web

Origin (0,0) located at lower left hand of screen

x position increases going right

y position increases going up

max x,y at upper right hand corner

Page 39: Cocos2d-x C++ Windows 8 &Windows Phone 8

C++ Test Demo

Page 40: Cocos2d-x C++ Windows 8 &Windows Phone 8

Lexicon

Director

Node

Scene

Layer

Sprite

Action

Particle

Event

Page 41: Cocos2d-x C++ Windows 8 &Windows Phone 8

Key Points

Cocos2d-x is feature packed

Its classes follow a logical progression which makes them easy to learn

Page 42: Cocos2d-x C++ Windows 8 &Windows Phone 8

Cocos2d-x: Building a Game

Page 43: Cocos2d-x C++ Windows 8 &Windows Phone 8

Cocos command optionsnew - creates a new game

run - compile, deploy, and run on game on target

deploy - deploy game to target

compile - compiles game

luacompile - minifies Lua files and compiles

jscompile - minifies JS files and compiles

Page 44: Cocos2d-x C++ Windows 8 &Windows Phone 8

Cocos command options

-h, —help - Shows the help

-v, —version - Shows the current version

Page 45: Cocos2d-x C++ Windows 8 &Windows Phone 8

Creating a new game

Open the cmd window

Validate that cocos is in your path, cocos <enter>

cocos new GameName -p com.company.name -l cpp

Page 46: Cocos2d-x C++ Windows 8 &Windows Phone 8

new command explained

MyGame: name of your project

-p com.MyCompany.MyGame: package name

-l cpp: programming language used for the project, valid values are: cpp, lua, and js

Page 47: Cocos2d-x C++ Windows 8 &Windows Phone 8

Directory Structure

Classes

cocos2d

Resources

Platform directories

Page 48: Cocos2d-x C++ Windows 8 &Windows Phone 8

WP8 Platform Directory

The solution file

Leave everything else alone

Page 49: Cocos2d-x C++ Windows 8 &Windows Phone 8

Class Directory

AppDelegate initializes cocos2d-x

HelloWorldScene is where your game begins

Page 50: Cocos2d-x C++ Windows 8 &Windows Phone 8

Hello World

Use Visual Studio to build and deploy the game

Best to use actual device

Page 51: Cocos2d-x C++ Windows 8 &Windows Phone 8

Debugging

Right click on project name

Click on Properties

Click on Debug tab (left side, second from top)

Under UI Task, select Native Only

Page 52: Cocos2d-x C++ Windows 8 &Windows Phone 8

Graphics Diagnostics

82 <-- number of draw calls

0.016 <-- time it took to render the frame

60.0 <-- frames per second

In the file, AppDelegate.cpp find the line: director->setDisplayStats(true);

Page 53: Cocos2d-x C++ Windows 8 &Windows Phone 8

Memory Diagnostics

Windows Phone adds a Memory Diagnostics

First value is current memory usage, second is the peak

Like the Graphics Diagnostics, it can be removed

In MainPage.xaml.cs, near the top of the file

Comment out definition of DISPLAY_MEMORY

Page 54: Cocos2d-x C++ Windows 8 &Windows Phone 8

Examining the code

AppDelegate.cpp initializes cocos2d-x and launches your game

HelloWorldScene.cpp is your game

Initially it doesn’t do much

Page 55: Cocos2d-x C++ Windows 8 &Windows Phone 8

Adding Scenes

Scenes are actually derived from the Layer class

Add scene for main, game, pause, end game

Add colors to scenes

Add transitions

Page 56: Cocos2d-x C++ Windows 8 &Windows Phone 8

Adding Classes

For cross platform-ness we want preserve our directory structure

Visual Studio needs to be tricked

We add the class, remove it, move it to correct directory, then add it back

Page 57: Cocos2d-x C++ Windows 8 &Windows Phone 8

Class Template

Most of the classes we add look like this

Prefer using #ifndef over #pragma once

Remember to include base class

Page 58: Cocos2d-x C++ Windows 8 &Windows Phone 8

CREATE_FUNCUnlike Java, C#, or even JavaScript, C++ programs manage their own memory

cocos has memory manage

CREATE_FUNC adds it to your class

Page 59: Cocos2d-x C++ Windows 8 &Windows Phone 8

How the Scene is launched

Currently we are still using the HelloWorldScene instead of our fancy new MainScene

Open file AppDelegate.cpp, find:

auto scene = HelloWorld::createScene();

Page 60: Cocos2d-x C++ Windows 8 &Windows Phone 8

The Game Loop

The central component of any game

Allows game to run smoothly regardless of user input

Allows game to run at same speed regardless of machine

Page 61: Cocos2d-x C++ Windows 8 &Windows Phone 8

Game Loop Reality

In the scene init add, this->scheduleUpdate()

Add an update method, void HelloWorld::update(float dt)

The update method should be as fast as possible

Page 62: Cocos2d-x C++ Windows 8 &Windows Phone 8

Steps

Add a background

Add a hero

Move the hero

Detect touches

Animate Hero

Page 63: Cocos2d-x C++ Windows 8 &Windows Phone 8

Steps

Adding sound

Adding music

Adding scenes

Page 64: Cocos2d-x C++ Windows 8 &Windows Phone 8

Resources

http://www.nosoapradio.us/

http://www.freesound.org/

http://spritedatabase.net/

http://opengameart.org/

http://www.lostgarden.com/search/label/free%20game%20graphics

Page 65: Cocos2d-x C++ Windows 8 &Windows Phone 8

Summary

Cocos2d-x is a free open source game engine

It supports Windows, WP8, iOS, Android, and more

https://github.com/Rockncoder/PlaneGame2

Page 66: Cocos2d-x C++ Windows 8 &Windows Phone 8

Contacting Me

@therockncoder

[email protected]

https://github.com/Rockncoder

http://www.slideshare.net/rockncoder

Page 67: Cocos2d-x C++ Windows 8 &Windows Phone 8

Text

http://spkr8.com/t/39721Please rate this talk!