Minicurso de Jogos Multiplataforma com Cocos2d-x

Pedro Kayatt@pekayatt

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

Elementos Classificatórios

• Ferramentas• Materiais utilizados

• Regras

• Perícia (Skill), Estratégia e Sorte• CS, SC2, Campo Minado :D

Tipos de Jogos

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

Jogos Digitais

• Tradução direta dos jogos “reais”

• Diversos estilos “novos”

• Possibilidades infinitas

• Muitas simulações

Jogos Digitais - Papéis

• Produtor• Editor (Publisher)• Time de Desenvolvimento• Designer (Game)• Programadores• Artista• Designer de Fases* • Engenheiro de Som• Testadores

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)

Ciclos de Desenvolvimento

WaterFall - Cascata

Desenvolvimento Ágil

Importante - CrunchPreciso 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

Mão na massa?

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)

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

Cocos2D-X - Arquitetura

Cocos2D-JS - Arquitetura

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++)

The magic

Preparando o Ambientehttp://www.cocos2d-x.org/download

Instalando Web-Service

• XAMPP : for windows, Mac, Linux.• WAMP : for windows• MAMP : for mac

Testando

Javascript IDE

• Notepad ++

• Aptana

• Jetbraind Webstorm

• Visual Studio 2012+

• Cocos Code IDE

Estrutura

Hierárquica

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

Moonwarriors

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" ]}

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]);

}

Exemplo – src/app.js

var HelloWorldLayer = cc.Layer.extend({

sprite:null,

ctor:function () {

/1. super init first

this._super();

…

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);

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));

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;

}

Entrada - Teclado

this.setKeyboardEnabled(true);

onKeyUp:function (e){

// intercepta quando uma tecla é solta

},

 

onKeyDown:function (e){

// intercepta quando uma tecla é pressionada

Testando no Navegador (lembrar de usar WAMP)

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

USANDO A COCOS CODE IDE (2)

Interface manjada com Simulador de quebra!

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)

Setando variáveis de ambiente

• c:\cygwin\home\user\.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)

Rodando em outras plataformas

• Jeito oficial: cocos console (acredite é muito melhor)

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 ”

Vamos ao código?

• Ideias:

• Ninjas atiradores

• Naves

• Plataforma runners

• Puzzles

Obrigado!

• Pedro Kayatt• @pekayatt

• Naked Monkey Games• @nakedmonkeyG• www.nakedmonkey.com.br