SlideShare une entreprise Scribd logo
1  sur  59
Télécharger pour lire hors ligne
Intro to Mobile Game
Programming with Cocos2d-JS
2014 - So Cal Code Camp - San Diego
Troy Miles
Troy Miles
Troy Miles aka the RocknCoder
Over 30 years of programming experience
Wrote a few games for Interplay in the 80's and 90’s
Speaker and writer on all things web & mobile
Contacting Me
@therockncoder
rockncoder@gmail.com
http://therockncoder.blogspot.com/
https://github.com/Rockncoder
https://www.youtube.com/user/rockncoder
Text
https://bitly.com/bundles/rockncoder/5
Agenda, Session 1
What is Cocos2d-JS?
Setting Up Your Environment
Parts is Parts
Workflow
Agenda, Session 2
Let’s look at a game
Audio
Cocos Studio + Other Tools
Ads
Publishing
Promoting
Why make mobile games?
Titles using Cocos2d-x
Text
Avengers Alliance
Marvel Entertainment
Text
Family Guy: The Quest for Stuff
TinyCo, Inc.
Diamond
Dash
Wooga
Star Wars:
Tiny Death
Star
LucasArts
BADLAND
Frogmind
Cocos2d-JS
History
Cocos2d-JS
Platforms and
Restrictions
History
2008 - Ricardo Quesada, a game developer in Argentina,
writes a game framework named Cocos2d
2009 - After the iPhone SDK release, Cocos2d rewritten
in Objective-C to become Cocos2d-iPhone
2010 - Zhe Wang, a developer in China, creates a fork,
Cocos2d-x
Chukong Technologies Inc, Zhe's company, develops
Cocos2d-JS, -HTML5, and -Lua
Cocos2d-JS
Cocos2d-x JavaScript version
Full Cocos2d-x functionality
Simplified JavaScript friendly API
Code Once, Run Everywhere
Mobile Native, Desktop, Web
Platforms
Mac OS X
Windows
Mac OS X
iOS
Android
HTML 5
Mac OS X
Windows
Windows 7
Android
HTML5
Windows Phone 8 (soon)
Prerequisites
Android
Java 6 or 7
Android ADT (NOT
Android Studio)
Android NDK
iOS
Xcode
HTML5
No extra prerequisites
Desktops
You can also build desktop apps for Windows and Mac
OS X
You will need Visual Studio and Xcode respectively
I won’t speak further about this
Python 2
The cocos command
line needs python to run
python 2.7.5+
It won’t work with
python 3
https://www.python.org/
downloads/
Installation
http://cocos2d-x.org/
download
Unzip the file
execute ./setup.py
cocos command options
new - Creates a new project
compile - Compiles the current project to binary
deploy - Deploy a project to the target
run - Compiles & deploy project and then runs it on the
target
jscompile - minifies and/or compiles js files
cocos new
cocos new -l js
cocos new -l js —no-native
cocos new projectName -l js -d ./Projects
cocos new projectName -l js
Parts is Parts
Project Files & Folders
Terminology
Coordinate system
Project files and folders
frameworks/runtime/tools
res - your resources
src - your JS source code
project.json - configuration
main.js - JS boot code
index.html - HTML markup
project.json
debug - the current debug setting
showFPS - whether or not to show the frame rate
frameRate - the desired frame rate
modules - cocos2d and potentially plugins
jsList - all of your source code
Demo time
The code flow
index.html
main.js's
app.js
Terminology
cc - Cocos2d, most classes prepended with this
Director - takes care of navigation between scenes
Node - Almost every element is a node
Scene - a screen in your game
Sprite - a 2D image that can be moved, rotated, scaled &
more
Layer - a special node which accepts user input
More terminology
Action - an order given to a node, like animations
Menu - Creates an onscreen menu
LabelTTF - The simplest option for displaying text
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
Workflow
Program Editor
Deploying
Modifying
Debugging
Program editor
I used WebStorm 8
It is available for
Windows, Mac, and
Linux
It has a Chrome
extension, JetBrains IDE
Support, allows
debugging
Deploying
Choose
Right click on index.html
Click Debug
“index.html”
Modifying
Double tap a file to open
it in the editor
Modify the text as desire
Click the refresh icon to
run the code again
Debugging
To set a break point,
click in the gutter to the
left of the text
To set a conditional
breakpoint, right click it
and specify a condition
Click again to delete it
Let’s look at a game
Parts
Scenes
Player
User Input
Physics plug-in
Collision detection
Audio
File formats
Sounds
Music
File formats
All of the devices can play mp3
Only some of the browsers can
Playing sounds
Playing sounds is easy
Simply call the
audioEngine’s playEffect
method
Cocos Studio + Other Tools
Animation Editor
UI Editor
Scene Editor
Data Editor
Tiled
Ads
Ads are tough since there is no readily available JS
module
AdMob / AdSense
iAds
Microsoft Ads
Publishing
Becoming a developer
Materials
Deploying
iOS
$99 a year for an individual in the local currency
$299 for an enterprise
Free for the university program
Only developers can put apps on devices
Android
$25 for a lifetime
Anyone can put apps on a device
Materials
Signed app
Icons
Screenshots
Big Images
Descriptions
Website
Videos
Promoting
Family and Friends
Social Media
Web site
Advertising
Summary
Cocos2d-JS allows you to create fast cross platform
games
Installation and setup can be a bit tough
Monetizing with Ads is also tough
Text
https://bitly.com/bundles/rockncoder/5

Contenu connexe

Tendances

Game Architecture and Programming
Game Architecture and ProgrammingGame Architecture and Programming
Game Architecture and Programming
Sumit Jain
 

Tendances (13)

Game software development trends presentation
Game software development trends   presentationGame software development trends   presentation
Game software development trends presentation
 
Before starting android game development
Before starting android game developmentBefore starting android game development
Before starting android game development
 
Game Architecture and Programming
Game Architecture and ProgrammingGame Architecture and Programming
Game Architecture and Programming
 
Making A Game Engine Is Easier Than You Think
Making A Game Engine Is Easier Than You ThinkMaking A Game Engine Is Easier Than You Think
Making A Game Engine Is Easier Than You Think
 
Game Development workshop with Unity3D.
Game Development workshop with Unity3D.Game Development workshop with Unity3D.
Game Development workshop with Unity3D.
 
Introduction to game development
Introduction to game developmentIntroduction to game development
Introduction to game development
 
06. Game Architecture
06. Game Architecture06. Game Architecture
06. Game Architecture
 
Introduction to Game Development and the Game Industry
Introduction to Game Development and the Game IndustryIntroduction to Game Development and the Game Industry
Introduction to Game Development and the Game Industry
 
Animation & video game production process
Animation & video game production processAnimation & video game production process
Animation & video game production process
 
Top 10 Mobile Game Development Tools | Redbytes
Top 10 Mobile Game Development Tools | RedbytesTop 10 Mobile Game Development Tools | Redbytes
Top 10 Mobile Game Development Tools | Redbytes
 
Introduction to Game Development
Introduction to Game DevelopmentIntroduction to Game Development
Introduction to Game Development
 
Final project report of a game
Final project report of a gameFinal project report of a game
Final project report of a game
 
Two – one = zero
Two – one = zeroTwo – one = zero
Two – one = zero
 

En vedette

WORKING AND PROGRAMMING OF KUKA ROBOT
WORKING AND PROGRAMMING OF KUKA ROBOTWORKING AND PROGRAMMING OF KUKA ROBOT
WORKING AND PROGRAMMING OF KUKA ROBOT
Shahid Faizee
 
Gaming console final presentation
Gaming console final presentationGaming console final presentation
Gaming console final presentation
Vivek Bharadwaj
 

En vedette (15)

What is direct X ?
What is direct X ?What is direct X ?
What is direct X ?
 
Game development (Game Architecture)
Game development (Game Architecture)Game development (Game Architecture)
Game development (Game Architecture)
 
Game Development: an Unexpected Journey
Game Development: an Unexpected JourneyGame Development: an Unexpected Journey
Game Development: an Unexpected Journey
 
Game Balancing & Its Automation
Game Balancing & Its AutomationGame Balancing & Its Automation
Game Balancing & Its Automation
 
How to build Android Chat App with Firebase for 2 hours?
How to build Android Chat App with Firebase for 2 hours?How to build Android Chat App with Firebase for 2 hours?
How to build Android Chat App with Firebase for 2 hours?
 
Creating the first app with android studio
Creating the first app with android studioCreating the first app with android studio
Creating the first app with android studio
 
jQuery Mobile Jump Start
jQuery Mobile Jump StartjQuery Mobile Jump Start
jQuery Mobile Jump Start
 
Robótica y programación Kuka
Robótica y programación KukaRobótica y programación Kuka
Robótica y programación Kuka
 
Textual Robot programming
Textual Robot programmingTextual Robot programming
Textual Robot programming
 
Gaming Console
Gaming Console Gaming Console
Gaming Console
 
WORKING AND PROGRAMMING OF KUKA ROBOT
WORKING AND PROGRAMMING OF KUKA ROBOTWORKING AND PROGRAMMING OF KUKA ROBOT
WORKING AND PROGRAMMING OF KUKA ROBOT
 
Gaming console final presentation
Gaming console final presentationGaming console final presentation
Gaming console final presentation
 
Robot programming
Robot programmingRobot programming
Robot programming
 
11 Facts You Probably Didn't Know About Pasta
11 Facts You Probably Didn't Know About Pasta11 Facts You Probably Didn't Know About Pasta
11 Facts You Probably Didn't Know About Pasta
 
Top 10 Most Eaten Foods In The World
Top 10 Most Eaten Foods In The WorldTop 10 Most Eaten Foods In The World
Top 10 Most Eaten Foods In The World
 

Similaire à Introduction to Mobile Game Programming with Cocos2d-JS

Html5 game using impact js
Html5 game using impact jsHtml5 game using impact js
Html5 game using impact js
Ha Bogay
 
BitSquid Tech: Benefits of a data-driven renderer
BitSquid Tech: Benefits of a data-driven rendererBitSquid Tech: Benefits of a data-driven renderer
BitSquid Tech: Benefits of a data-driven renderer
tobias_persson
 
Minko stage3d 20130222
Minko stage3d 20130222Minko stage3d 20130222
Minko stage3d 20130222
Minko3D
 
Android 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti ColvinAndroid 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti Colvin
swengineers
 

Similaire à Introduction to Mobile Game Programming with Cocos2d-JS (20)

Cross Platform Game Programming with Cocos2d-js
Cross Platform Game Programming with Cocos2d-jsCross Platform Game Programming with Cocos2d-js
Cross Platform Game Programming with Cocos2d-js
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutes
 
android studio
 android studio android studio
android studio
 
Android game engine
Android game engineAndroid game engine
Android game engine
 
Android game development
Android game developmentAndroid game development
Android game development
 
Full stack development in Go
Full stack development in GoFull stack development in Go
Full stack development in Go
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
 
HTML5 Game Development frameworks overview
HTML5 Game Development frameworks overviewHTML5 Game Development frameworks overview
HTML5 Game Development frameworks overview
 
Video game development for everybody
Video game development for everybodyVideo game development for everybody
Video game development for everybody
 
C# Production Debugging Made Easy
 C# Production Debugging Made Easy C# Production Debugging Made Easy
C# Production Debugging Made Easy
 
Casual Engines 2009
Casual Engines 2009Casual Engines 2009
Casual Engines 2009
 
Gtug
GtugGtug
Gtug
 
Html5 game using impact js
Html5 game using impact jsHtml5 game using impact js
Html5 game using impact js
 
BitSquid Tech: Benefits of a data-driven renderer
BitSquid Tech: Benefits of a data-driven rendererBitSquid Tech: Benefits of a data-driven renderer
BitSquid Tech: Benefits of a data-driven renderer
 
.NET Core Previews - New Features in .NET Core and ASP.NET Core 2.1, Blazor a...
.NET Core Previews - New Features in .NET Core and ASP.NET Core 2.1, Blazor a....NET Core Previews - New Features in .NET Core and ASP.NET Core 2.1, Blazor a...
.NET Core Previews - New Features in .NET Core and ASP.NET Core 2.1, Blazor a...
 
Minko stage3d 20130222
Minko stage3d 20130222Minko stage3d 20130222
Minko stage3d 20130222
 
Android 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti ColvinAndroid 3D by Ivan Trajkovic and Dotti Colvin
Android 3D by Ivan Trajkovic and Dotti Colvin
 
androidstudio.pptx
androidstudio.pptxandroidstudio.pptx
androidstudio.pptx
 
Visual Studio for Mac (AltConf 2017)
Visual Studio for Mac (AltConf 2017)Visual Studio for Mac (AltConf 2017)
Visual Studio for Mac (AltConf 2017)
 

Plus de Troy Miles

Plus de Troy Miles (20)

Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web Servers
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot Camp
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with Kotlin
 
React Native One Day
React Native One DayReact Native One Day
React Native One Day
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScript
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in Clojure
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You Knew
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEAN
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveX
 
JavaScript Foundations Day1
JavaScript Foundations Day1JavaScript Foundations Day1
JavaScript Foundations Day1
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Dernier (20)

Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 

Introduction to Mobile Game Programming with Cocos2d-JS