passo a passo com o vaca5
DESCRIPTION
apresentação sobre passo a passo para a criação de um jogo usando o framework vaca5. http://labs.vacavitoria.com/vaca5/TRANSCRIPT
![Page 1: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/1.jpg)
JOGO COM VACA5Passo a passo
http://labs.vacavitoria.com/vaca5/
![Page 2: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/2.jpg)
![Page 3: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/3.jpg)
Receita do bolo
![Page 4: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/4.jpg)
Rascunho
![Page 5: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/5.jpg)
Passo 1 - ambiente
Movimento da nave Inimigos
![Page 6: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/6.jpg)
Passo 2 – contas
Disparos
Contagem de pontos
![Page 7: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/7.jpg)
Passo 3 – desafio para casa =)
Inimigos especiais
Com movimentos especiais ??
![Page 8: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/8.jpg)
PASSO UMO Ambiente, ou acredite que configurar coisas é um pesadelo ...
![Page 9: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/9.jpg)
Preparação do ambiente
• Criação do html vazio• Disponibilidade da biblioteca• Adicionar nave• Mover nave• Adicionar Inimigo• Mover inimigo
![Page 10: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/10.jpg)
Pagina com cor - 1.html<canvas id="c">
Navegador não compatível com HTML5
</canvas>
<div id="debug_div" style="float: right; width: 300px;"></div>
<script>
var canvasGame = document.getElementById('c');
var mygame = initGame(canvasGame, 640, 480);
mygame.currentScene.background = NMSColor.TANGERINE;
mygame.start();
</script>
![Page 11: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/11.jpg)
Exibir imagem – 2.html
var canvasGame = document.getElementById('c');
var mygame = initGame(canvasGame, 640, 480);
var sprite = new Sprite('ship', 100, 100, 'ship.png' );
mygame.currentScene.add(sprite);
mygame.start();
![Page 12: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/12.jpg)
Centralizar a imagem – 3.html
// cena do jogo
var gameScene = new Scene(g.width, g.height);
var sprite = new Sprite('ship', 0, 0, 'ship.png' );
gameScene.add(sprite);
sprite.start = function(_game, child){
child.x = (_game.width - child.width) /2;
child.y = _game.height - child.height - border;
}
![Page 13: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/13.jpg)
Centralizar a imagem – 3.html (2)
// cena de carregamento
var loadScene =
new SceneLoading(g.width, g.height, gameScene);
g.currentScene = loadScene;
g.start();
![Page 14: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/14.jpg)
Mover nave – 4.htmlfunction MoveShip() {
this.speed = 40;
this.update = function(_game) {
var target = _game.currentScene.findById('ship');
if (_game.isKeyPressed('left')) {
target.x -= this.speed * _game.dt;
}
if (_game.isKeyPressed('right')) {
target.x += this.speed * _game.dt;
}
};
}
gameScene.add(new MoveShip());
![Page 15: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/15.jpg)
Limites laterais – 5.htmlvar target = _game.currentScene.findById('ship');
if (_game.isKeyPressed('left')) {
var tx = target.x - (this.speed * _game.dt);
if( tx > border ){
target.x = tx;
}
}
if (_game.isKeyPressed('right')) {
var tx = target.x + (this.speed * _game.dt);
if( tx + target.width < (_game.width - border)){
target.x = tx;
}
}
![Page 16: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/16.jpg)
Adicionando inimigo – 6.html
var enemy =
new Sprite('enemy', 0, border, 'images/enemy.png' );
gameScene.add(enemy);
enemy.start = function(_game, child){
var max = _game.width - child.width - (2 * border);
var startPos = Math.floor((Math.random()*max)+1);
child.x = max;
}
![Page 17: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/17.jpg)
Movendo Inimigo – 7.htmlfunction MoveEnemy() {
this.speed = 60;
this.direction = 1;
this.update = function(_game) {
var target = _game.currentScene.findById('enemy');
var tx = target.x + (this.speed * _game.dt * this.direction);
if( tx < border ||
tx + target.width > (_game.width - border)){
this.direction = this.direction * -1;
} else {
target.x = tx;
}
};
}
![Page 18: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/18.jpg)
Exibindo FPS – 7.html
// cena de carregamento
var loadScene = new SceneLoading(g.width, g.height, gameScene);
g.currentScene = loadScene;
g.showFPS = true;
g.fpsColor = '#FFFFFF';
g.start();
![Page 19: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/19.jpg)
![Page 20: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/20.jpg)
PASSO DOISDisparando loucamente pela tela !!
Ou não ... :8)
![Page 21: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/21.jpg)
Disparos !! – 8.htmlif (_game.isKeyPressed('fire2')) {
var target = _game.currentScene.findById('ship');
var bullet = _game.currentScene.findById('bullet');
var x = target.x + (target.width /2) - (bullet.width/2);
var y = target.y - bullet.height;
var shootSprite = new Sprite('shoot_' + this.counter,
x, y, 'images/bullet.png' );
shootSprite.beforeUpdate = function(_game, current, child){
child.y -= bulletSpeed * _game.dt;
if( child.y < 0 ){
child.remove = true;
}
}
_game.currentScene.add( shootSprite );
this.counter ++;
}
Sim nós temos cache das imagens
!!
![Page 22: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/22.jpg)
Remove = true ? WTF ?
shootSprite.beforeUpdate = function(_game, current, child){
child.y -= bulletSpeed * _game.dt;
if( child.y < 0 ){
child.remove = true;
}
}
Avisa a cena para remover este objeto
![Page 23: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/23.jpg)
![Page 24: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/24.jpg)
Nem tantos disparos .. Humpf ... – 9.html
function Shoot() {
this.counter = 1;
this.wait = -1;
this.TimeToShoot = 2.5;
this.update = function(_game) {
if( this.wait >= 0 ){
this.wait -= _game.dt;
}
if (_game.isKeyPressed('fire2') && this.wait < 0 ) {
// o resto do codigo do tiro ...
this.wait = this.TimeToShoot;
}
};
}
Espere antes de atirar novamente
![Page 25: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/25.jpg)
Contando pontos – 10.html
g.colision.handlers.push(function(_game, _a, _b) {
if( _a.id.indexOf('shoot_') == 0){
score ++;
_a.remove = true;
randomEnemy(_game,_b);
}
});
![Page 26: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/26.jpg)
Mostrando os pontos – 10.html
var scoreLabel = new Label(border,border,'score','Loading');
scoreLabel.fillColor = '#FFFFFF';
scoreLabel.beforeUpdate = function(_game, current, child ) {
child.x = _game.width - child.width - border;
child.text = score;
}
gameScene.add(scoreLabel);
![Page 27: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/27.jpg)
Agora sua vez de fazer um jogo ...
![Page 28: Passo a passo com o vaca5](https://reader031.vdocuments.mx/reader031/viewer/2022013114/54808d9eb4795983578b471c/html5/thumbnails/28.jpg)
Obrigado
fb.com/vacavitoria