Agenda

  • Big deal
  • HTML5
  • Javascript
  • Just Vanilla Games
  • Phaser.io
  • LizBird for dummies
  • Show me the code bitch!!!

Desenvolver um game Zoar o coleguinha

HTML5





É a nova especificação do HTML que define um conjunto de regras de marcação para escrita do HTML e xHTML além de definir as APIs (DOM) que podem ser utilizadas para manipulação dos elementos.

HTML5 Rocks

W3C

Javascript





É uma linguagem de script interpretada pelo motor de renderização do browser, largamente utilizada em aplicações web, mobile, desktop, games geladeiras, micro-ondas, tamagotchis...

Mozilla

Airbnb (JSG)

Por que aprender isso?



  • Extremamente fácil de aprender
  • Simples de usar
  • Multiplataforma
  • Não depende de compilador
  • Unity interpreta / compila Javascript (Unityscript)
  • Podemos fazer coisas incríveis apenas com eles

Just Vanilla Games





Oh wait!!!

Tic Tac Toe

Snake

Pacman

Phaser.io

Phaser o que?





"Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering"

phaser.io

LizBird for dummies

Setup project




          <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="utf-8" />
                  <title>LizBird</title>
              </head>

              <body>
                  <div id="stage"></div>

                  <script type="text/javascript" src="phaser.min.js"></script>
                  <script type="text/javascript" src="LizBird.js"></script>
              </body>
          </html>

Phaser Sctructure




        var game = new Phaser.Game(400, 490, Phaser.AUTO, 'stage');

        var GameView = {
            preload: function() {},

            create: function() {},

            controls: function() {},

            update: function() {}
        }

        game.state.add('main', GameView);
        game.state.start('main');

Initialize





          var GameView = {
              preload: function() {
                // Define a cor de fundo do stage
                game.stage.backgroundColor = '#71c5cf';

                // Carrega a imagem
                game.load.image('lizBird', 'assets/img/eliz.png');
              }
          }

Create / Show





          var GameView = {
              create: function() {
                // Adiciona a lizBird ao stage
                this.lizBird = this.game.add.sprite(100, 245, 'lizBird');
              }
          }

Our baby

Vamos calcular a força gravitacional?

Fg = G((M1 . M2)/r2)

I was just kidding :-D





          var GameView = {
              create: function() {
                // Define o sistema de física
                game.physics.startSystem(Phaser.Physics.ARCADE);

                // Ativa o sistema de física ao objeto lizBird
                game.physics.arcade.enable(this.lizBird);

                // Seta a força gravitacional
                this.lizBird.body.gravity.y = 1200;
              }
          }

Keyboard / Touch control





      var GameView = {
          controls: function() {
              // Adiciona o controle a barra de espaço
              var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

              // Chama o método jump ao soltar a barra de espaço / toque
              spaceKey.onDown.add(this.jump, this);

              this.game.input.onDown.add(this.jump, this);
          }
      }

Vamos pular?

Jump method







      var GameView = {
          jump: function() {
              // define a força gravitacional do pulo
              this.lizBird.body.velocity.y = -400;
          }
      }

É hora de matar!!!

Time of death







        var GameView = {
            update: function() {
                // se a lizBird sair do stage, reinicia o game
                if (this.lizBird.inWorld == false) {
                    this.restartGame();
                }
            }
        }

Restart game







        var GameView = {
            restartGame: function() {
                game.state.start('main');
            }
        }

Adding the Pipes







      var GameView = {
          preload: function() {
              // carrega o pipe
              game.load.image('pipe', 'assets/img/pipe.png');
          }
      }

Adding the Pipes





      var GameView = {
          create: function() {
              // Cria um grupo de pipes
              this.pipes = game.add.group();

              // Adiciona física ao grupo
              this.pipes.enableBody = true;

              // Cria 20 pipes
              this.pipes.createMultiple(20, 'pipe');
          }
      }

Adding one pipe


      var GameView = {
          addOnePipe: function(x, y) {
              // Pega o primeiro pipe morto do grupo
              var pipe = this.pipes.getFirstDead();

              // Defina a posição do pipe
              pipe.reset(x, y);

              // Adiciona velocidade para mover para esquerda
              pipe.body.velocity.x = -220;

              // Mata o pipe quando não estiver mais visível
              pipe.checkWorldBounds = true;
              pipe.outOfBoundsKill = true;
          }
      }

Adding row of pipes


      var GameView = {
          addRowOfPipes: function() {
              // Define onde a passagem estará
              var hole = Math.floor(Math.random() * 5) + 1;

              for (var i = 0; i < 8; i++) {
                  if (i != hole && i != hole + 1) {
                      this.addOnePipe(400, i * 60 + 10);
                  }
              }
          }
      }

Adding row of pipes







      var GameView = {
          create: function() {
              // Chama a função addRowOfPipes a cada 1,5 segundos
              this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);
          }
      }

Our baby with pipes :-P

Collision

Adding a score







        var GameView = {
          create: function() {
              // Adiciona o score / contador de pontos
              this.score = 0;
              this.labelScore = game.add.text(20, 20, "0",
              { font: "30px Arial", fill: "#ffffff" });
          }
        }

Increase the score







      var GameView = {
          addRowOfPipes: function() {
              // Incrementa contador de pontos
              this.score += 1;
              this.labelScore.text = this.score;
          }
      }

Time of death again




  var GameView = {
      update: function() {
          // Se colidir nos pipes, reinicia o game
          game.physics.arcade.overlap
          (
            this.lizBird,
            this.pipes,
            this.restartGame,
            null,
            this
          );
      }
  }

That's all folks!



github.com/zigolis

twitter.com/zigolis