Minicurso palestrado no Computer on the Beach 2015 ensinando alguns básicos de Design de Jogos utilizando a engine Cocos2d-x.

1. Minicurso de Jogos
Multiplataforma com
Cocos2d-x
Pedro Kayatt
@pekayatt

2. Pilares do Desenvolvimento de Jogo
• Jogador
• Adversário (quebra-cabeças?)
• Interatividade
• Regras
• Objetivo
• Condição de Vitória, Empate e DERROTA!
• Ser uma forma de entretenimento

3. Elementos Classificatórios
• Ferramentas
• Materiais utilizados
• Regras
• Perícia (Skill), Estratégia e Sorte
• CS, SC2, Campo Minado :D

4. Tipos de Jogos
• Mesa
• Caneta e Papel
• Cartas
• Dados
• Tabuleiros
• Musicais
• Interativos
• Ações dos jogadores alteram regras do jogo (Bang)

5. Jogos Digitais
• Tradução direta dos jogos “reais”
• Diversos estilos “novos”
• Possibilidades infinitas
• Muitas simulações

6. Jogos Digitais - Papéis
• Produtor
• Editor (Publisher)
• Time de Desenvolvimento
• Designer (Game)
• Programadores
• Artista
• Designer de Fases*
• Engenheiro de Som
• Testadores

7. Jogos Digitais - Processo
• Pré-Produção
• Pitch + concepts
• GDD – Game Design Document (em desuso)
• Protótipo (POR FAVOR!)
• Produção
• Design
• Programação
• Criação
• Fases – arte – áudio
• Testes (e mais testes)

8. Ciclos de Desenvolvimento
WaterFall - Cascata
Desenvolvimento Ágil

9. Importante - Crunch
Preciso pra ontem, então vamos ficar um tempinho extra….
Chrono Trigger OST – Apenas um engenheiro de som…
hospitalizado por dormir diversas vezes no escritório

10. Mão na massa?

11. COCOS2D
• Cross Platform
• IOS
• Android
• Windows Phone
• Blackberry, Bada, Tizen, geladeira da minha avó….
• Open Source
• Rápida
• Comprovada
• 25% de todos jogos mobiles (muito forte na Ásia)

12. Coco2D – Qual?
• Cocos2D-X
• C++
• Com maior suporte a diferentes plataformas
• Rápida e leve
• CocosSharp
• Windows Phone
• Nuget (suporte do Xamarin)
• Cocos2D-JS
• Rápido desenvolvimento (Javascript)
• Multi plataforma (em navegadores)
• Javascript Binding

13. Cocos2D-X - Arquitetura

14. Cocos2D-JS - Arquitetura

15. Javascript binding what?
• Performance até 20x melhor do que no mobile browser
• Como? Mágica? Não! É tecnologia (e um pouco de magia negra)
• Mozilla Spidermonkey – Roda o javascript
como código nativo (C++)

16. The magic

17. Preparando o Ambiente
http://www.cocos2d-x.org/download

18. Instalando Web-Service
• XAMPP : for windows, Mac, Linux.
• WAMP : for windows
• MAMP : for mac

19. Testando

20. Javascript IDE
• Notepad ++
• Aptana
• Jetbraind Webstorm
• Visual Studio 2012+
• Cocos Code IDE

21. Estrutura

22. Hierárquica

23. Exemplos
• MoonWarriors – um jogo no melhor estilo “shooter” onde o jogador
controla uma nave espacial
• WatermelonWithMe – utiliza um simulador de física 2D (chipmunk) e
desafia o jogador a dirigir uma caminhonete sem deixar melancias
caírem de sua caçamba.
• CrystalCraze – um jogo no estilo Puzzle elaborado com uma
ferramenta chamada CocosBuilder
• CocosDragonJS – jogo plataforma parecido com sucessos como
Doogle Jump e Mega Jump, utiliza uma mescla de CocosBuilder com
edição de Javascript

24. Moonwarriors

25. Exemplo – project.json
{
"project_type": "javascript",
"debugMode": 1,
"showFPS": true,
"frameRate": 60,
"id": "gameCanvas",
"renderMode": 0,
"engineDir": "frameworks/cocos2d-html5",
"modules": [
"cocos2d"
],
"jsList": [
"src/resource.js",
"src/app.js"
]
}

26. Exemplo – src/resource.js
var res = {
HelloWorld_png : "res/HelloWorld.png",
CloseNormal_png : "res/CloseNormal.png",
CloseSelected_png : "res/CloseSelected.png"
};
var g_resources = [];
for (var i in res) {
g_resources.push(res[i]);
}

27. Exemplo – src/app.js
var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
/1. super init first
this._super();
…

28. Adicionando Sprites
// adicionando o sprite ao HelloWorldLayer, centralizado e usando o arquivo
.png como fonte (setado no arquivo resource.js)
this.sprite = new cc.Sprite(res.HelloWorld_png);
this.sprite.attr({
x: size.width / 2, //pos X e Y do sprite
y: size.height / 2,
scale: 0.5, //escalona o Sprite para ter metade de seu tamanho nominal
rotation: 180 // gira o Sprite em 180 graus.
});
this.addChild(this.sprite, 0);

29. Actions
var rotateToA = cc.RotateTo.create(2, 0);
var scaleToA = cc.ScaleTo.create(2, 1, 1);
// executa uma sequência de ações diretamente no sprite
this.sprite.runAction(cc.Sequence.create(rotateToA, scaleToA));

30. Entrada - Touch
// ao tocar na tela
onTouchesBegan:function (touches, event) {
this.isMouseDown = true;
},
// ao mover o toque na tela
onTouchesMoved:function (touches, event) {
if (this.isMouseDown) {
if (touches) {
this.circle.setPosition(cc.p(touches[0].getLocation().x,
touches[0].getLocation().y));
}
}
},
// ao remover o toque da tela
onTouchesEnded:function (touches, event) {
this.isMouseDown = false;
}

31. Entrada - Teclado
this.setKeyboardEnabled(true);
onKeyUp:function (e){
// intercepta quando uma tecla é solta
},
onKeyDown:function (e){
// intercepta quando uma tecla é pressionada

32. Testando no Navegador
(lembrar de usar WAMP)

33. USANDO A COCOS CODE IDE
• Na realidade a Cocos IDE é apenas um Eclipse alterado com o único
propósito de rodar a Cocos JS (ou Lua).
• Ela é ótima, dado que auto-completes funcionam perfeitamente e
você ainda pode adicionar outros plugins “eclipse” nela.
• A GRANDE vantagem, porém vem do fato de você poder utilizar um
JSB “prebuilt” como um simulador em tempo real, inclusive
debugando tudo.
• A última versão adicionou o profiling DS5 de Android como
funcionalidade nativa

34. USANDO A COCOS CODE IDE (2)
Interface manjada com Simulador de quebra!

35. EXECUTANDO O PROJETO NO ANDROID
• Android SDK
• http://developer.android.com/sdk/index.html
• Eclipse ADT Bundle
• Baixar Emulador Intel, HAXM e tudo que quiser no Android Manager
• Android NDK
• http://developer.android.com/tools/sdk/ndk/index.html
• CygWin
• Procure Mirrors mais amigaveis… (o default é um inferno)

36. Setando variáveis de ambiente
• c:cygwinhomeuser.bashprofile, abra este arquivo com o
Notepad++ e adicione:
• NDK_ROOT=/cygdrive/c/android-ndk-r8e
• Export NDK_ROOT
• Faça pelo Opções Avançadas do Windows
• Utilize o “setup.py” na raiz do diretório da Cocos2d-x (ou JS)

37. Rodando em outras plataformas
• Jeito oficial: cocos console (acredite é muito melhor)

38. Criando seu projeto
• Usando Cocos Console
(http://www.cocos2d-x.org/wiki/How_to_Start_A_New_Cocos2D-X_Game)
Depois rode o comando na pasta desejada:
“cocos new MyGame -p com.MyCompany.MyGame -l cpp ”

39. Vamos ao código?
• Ideias:
• Ninjas atiradores
• Naves
• Plataforma runners
• Puzzles

40. Obrigado!
• Pedro Kayatt
• @pekayatt
• Naked Monkey Games
• @nakedmonkeyG
• www.nakedmonkey.com.br