Games

Stadia: Plataforma de Games por Streaming da Google

Há algum tempo atrás, falamos aqui sobre o Project Stream, projeto desenvolvido pela Google que visava permitir que qualquer pessoa com uma boa conexão com a internet pudesse executar um jogo por meio do seu navegador, sem a necessidade de possuir um hardware de ponta para tal execução.

Na época o projeto foi executado e vários moradores dos EUA e Europa puderam testá-lo. Os feedbacks, em sua maioria, foram bem positivos, o que nos permite acreditar que o projeto foi um sucesso.

Após isso, o projeto foi “arquivado”… até o dia 19/04/2019, quando a Google, na GDC (Game Developers Conference), anunciou seu mais novo projeto, o Google Stadia, uma evolução do Project Stream.

O que é o Google Stadia?

O Google Stadia é uma evolução do Project Stream, porém, mantendo a mesma ideia. O principal foco do Stadia, é permitir que os jogadores possam executar seus games a partir de uma aba do Google Chrome, sem que qualquer processamento seja executado em sua máquina, mas nos servidores da Google.

O serviço estará disponível, segundo a Google, no decorrer de 2019 nos EUA, Canadá, Reino Unido e em grande parte da Europa. Ainda não há previsão de quando – e se – esse serviço chegará ao Brasil e nem a forma de cobrança (assinatura mensal, como a Netflix, ou valor por jogo).

Como funciona o Google Stadia?

Assim como o Project Stream, todo o processamento do jogo em execução será feito nos servidores da Google e apenas a imagem e som será devolvido ao seu computador. Da forma mais básica possível, o jogo será executado da seguinte forma:
1. O jogador aperta um botão (seja no joystick ou teclado);
2. Essa iteração é enviada ao servidor que está executando o jogo;
3. A iteração é realizada no jogo;
4. O servidor devolve ao jogador o efeito daquela iteração.

Sendo assim, até o seu Chromebook (sim, isso mesmo), com poder de processamento limitadíssimo, poderá executar jogos de última geração.

Google Stadia x Consoles (Xbox e PS4)

Segundo a Google, o Google Stadia é mais poderoso que os consoles atuais (Xbox One X e PS4 Pro), processando até 10,7 teraflops – isto é, capaz de realizar mais de 10 trilhões de operações de ponto flutuante por segundo – mais que o PS4 (que atinge 4.2 teraflops) e o Xbox (que processa até 6 teraflops).

Para ter todo esse poder de processamento, a Google afirma que cada servidor utilizado pelo Stadia vem com uma GPU x86 rodando a 2,7 GHz com 16 GB de RAM e uma GPU HBM2 de 10,7 teraflops.

Assim, a Google afirma que o Stadia poderá, logo que o serviço for lançado, rodar jogos a 60fps em resolução 4k e, futuramente, a 120fps com resolução 8k.

Stadia Controller

Acompanhando a plataforma de streaming, a Google lançou um controle para o Stadia, bem similar aos já conhecidos controles do Xbox e PS4, com um direcional digital na parte superior esquerda, dois analógicos na parte inferior e quatro botões na parte superior direita. Além disso, possui um botão que permite criar uma live para o YouTube:

Vai funcionar?

Bom, este tipo de projeto não é novo, diversas empresas já tentaram criar um serviço parecido com o Google Stadia, porém, nenhuma delas possui o poder e localização que a Google tem (servidores espalhados por todo o mundo). Sendo assim, é bem provável que este serviço seja um sucesso. Segundo feedbacks na internet, o serviço funciona (e bem) nos testes realizados na GDC 2019, resta saber quando chega ao consumidor final. Até lá, a Google pode (e deve) melhorar bastante o serviço 🙂

Principais tipos de jogos hiper casuais

Olá, Game Developers!

Já falamos aqui no Blog sobre o que são jogos hiper casuais.

Vamos ver agora sobre os seus principais tipos.

Momento certo

Esse tipo de jogo requer que o jogador aperte algum botão no momento certo. Não é preciso ter tanta habilidade, é preciso mais concentração. Um exemplo é o “Baseball Boy”, onde uma seta fica se movimentando e você só precisa tocar na tela no momento certo para acertar.

Empilhar

Jogos em que precisamos empilhar algo também seguem a ideia de se tomar uma atitude no momento certo. A diferença é que aqui também é exigida habilidade, pois se você demorar acabará perdendo o momento certo.

Um exemplo é o “Stack Jump”, onde plataformas aparecem e você precisa tocar na tela para fazer seu personagem pular. Pular no momento errado (muito cedo ou muito tarde) fará seu personagem ser empurrado pela plataforma e cair.

Habilidade

Jogos de habilidade normalmente nos fazem fazer algo simples e bem repetitivo. Se fizer uma ação errada você perde. Para ficar divertido é bom fazer o jogo acelerar, e então os jogadores poderão aos poucos melhorando suas habilidades e conseguir jogar mais rápido e conseguir mais pontos.

Um exemplo é o “Sky Streaker – Gumball”, onde você (Ricardo Waterson) deve subir em um poste e desviar das roupas. Quanto mais alto subir, mais pontos. Coletar moedas te permite comprar acessórios que te dão vantagens.

Para te apressar, os personagens Gumball e Darwin te perseguem, e você não pode deixar que te alcancem.

Subir / Cair

Jogos em que estamos em constante subida ou queda nos faz pensar em como agir nos momentos seguintes. Não há certo e errado, mas você precisa pensar rápido para tomar uma atitude no tempo certo.

O jogo “Rise Up” é um jogo em que temos um balão subindo e precisamos tirar todos os obstáculos de seu caminho, evitando que o balão estoure.

Desviar

Jogos de desvio nos fazem deslizar com os dedos pela tela para evitar obstáculos.

São bem parecidos com os jogos em que temos algo subindo ou caindo. A diferença é que o tipo anterior depende mais de saber o que fazer no tempo certo, e os jogos de desviar exigem mais da sua habilidade e precisão.

Um exemplo é o jogo “Sonic Dash”, onde temos obstáculos e devemos desviar para os lados, abaixar ou pular.

Juntar

São jogos bem simples e que não exigem necessariamente que você tome decisões tão rapidamente. Objetos parecidos devem ser unidos, então o jogador precisa aprender a observar bem.

Um exemplo é o “Candy Crush Jelly Saga”, onde juntamos doces iguais. Algo que deixa o jogo mais desafiador são certas regras que são dadas em cada fase como, por exemplo, “evite juntar o doce X”.

Crescer

São jogos que te fornecem uma maneira de crescer. Jogadores com mais pontuação serão maiores, mas nem todos poderão crescer igualmente. Então é preciso saber controlar o tamanho da fase, quantidade de jogadores e quantidade de oferta de itens para o seu crescimento.

Um exemplo é o “Slither.io”, onde você deve engolir a maior quantidade de massa sem bater em outro jogador. Algo que deixa esse tipo de jogo mais legal é fazer com que os demais jogadores sejam pessoas reais.

Quebra-cabeça

São jogos em que a parte principal é pensar em como resolver um determinado desafio, o qual vai ficando cada vez mais difícil. É um dos tipos mais difíceis de serem desenvolvidos e é preciso um bom planejamento das fases. Alguns tipos não possuem fases, sendo do tipo infinito.

Um exemplo é o “Cut the Rope”, onde você deve cortar cordas para fazer um doce chegar até a boca de um monstrinho chamado “Om Nom”. Liberar o doce no lugar e no tempo errado farão o doce cair ou se quebrar, resultando no fracasso da fase.

Objetivos adicionais também fazem o jogo ser mais desafiador, como coletar três estrelas ou fazer um número limite de movimentos.

Ferramentas para Pixel Art

pixelart-octocat

Olá,Game Developers!

Hoje vou listar aqui os melhores programas para se trabalhar com Pixel Art. Entre eles há apps mobile, web e desktop tanto pagos quanto gratuitos.

Piskel

pixelart-octocat

O Piskel é uma ferramenta gratuita que roda diretamente do seu navegador.

Ele te permite criar animações, exportar PNG e GIF, visualizar o resultado do seu trabalho enquanto está editando (permitindo fazer ajustes em tempo real) e criar galerias privadas.

Ele é Open Source e também disponibiliza uma versão para você baixar para poder usar offline.

Pixilart

Pixilart

Pixilart é outra aplicação web gratuita. Ele também é bem simples de se usar. Você pode salvar suas artes online e compartilhá-las nas redes sociais.

Pixilart também é uma comunidade de artistas, então você pode interagir, participar de grupos, entrar em concursos e aprender com os outros.

Lospec

Lospec Pixel Editor

O Lospec Pixel Editor não tem tantas funcionalidades, sendo um dos editores mais simples desta lista. Mas isso pode ser bom para os iniciantes, já que terão uma interface mais simples.

No site você também encontra tutoriais e paleta de cores.

aseprite

O aseprite roda em Windows, OS X e Linux. Ele tem a versão paga (15 dólares) ou você pode obter de graça se pegar o código fonte e compilá-lo.

Esse programa é um dos mais utilizados e recomendados para se trabalhar com Pixel Art.

GraphicsGale

GraphicsGale

O GraphicsGale é outro programa bem completo e muito utilizado para trabalhar com desenho e animação de pixel art. Porém, ele só está disponível para Windows.

Ele suporta formatos como .ico, .gif, .avi, .cur e .ani.

Outra funcionalidade disponível também, muito conhecida em softwares de animação, é a “Onion Skin”, onde a próxima imagem e a anterior ficam na tela para você poder desenhar por cima, facilitando o processo de animação por frames.

Spriter

O Spriter é o mais completo dessa lista, com várias funcionalidades avançadas de animação. Ele não é só para Pixel Art, é um programa completo para animações voltadas para desenvolvimento de jogos 2D.

Os arquivos exportados podem ser implementados facilmente em programas como Construct, GameMaker, Unity, etc.

Entre as funcionalidades temos coisas como: caixas de colisões, animação por bones, curva de animação, modo Pixel Art, criação de efeitos com partículas, adicionar sons às animações, sincronização labial, etc.

Acredito que o vídeo acima já mostra o poder desse software incrível, dispensando mais comentários aqui.

Ele está disponível para Windows, Mac e Linux. Você pode baixar as versões mais antigas de graça ou comprar a versão PRO mais recente por 59,99 dólares.

Pixly

pixly

O Pixly é um editor de Pixel Art planejado para Smartphones e Tablets, e foi feito por um brasileiro!

Ele pode parecer simples na ilustração acima, mas ele possui várias funcionalidades (como animação, camadas, ferramenta de texto, integração com Dropbox e Google Drive, etc), podendo até mesmo ganhar de alguns dos programas já citados antes.

Se você estiver em um Tablet, pode ser que tenha uma boa produtividade por se aproveitar da TouchScreen.

Se estiver em um Smartphone, pode aproveitar o aplicativo em qualquer lugar para se divertir (já brinquei muito com ele enquanto esperava o ônibus).

O Pixly é gratuito e está disponível para aparelhos Android a partir da versão 2.3. Ele entrega uma melhor experiência em telas de pelo menos 4.7″.

Pixaki

Pixaki

O Pixaki é um aplicativo bem completo também, e foi projetado para iPad.

Ele também trabalha com vários formatos, como PSD, permitindo a fácil integração entre seus trabalhos tanto mobile e desktop.

Ele está disponível para iPads com iOS 9 ou superior. Ele custa 24,99 dólares ou você pode testá-lo por 14 dias.

Como se tornar um desenvolvedor de games?

Se tornar um desenvolvedor de games pode ser um sonho para alguém que adora esse universo. Tornar esse hobby em seu trabalho profissional já é possível. O mercado de games no Brasil se encontra em expansão, sendo uma área muito promissora. O Brasil já tem milhões de usuários, ficando na 4º posição, atrás somente dos EUA, Japão e China.

Apesar de todo esse crescimento, essa área ainda é bem limitada e desafiadora. Você pode trabalhar em uma empresa ou ser um desenvolvedor independente criando seus próprios jogos. Você também pode desenvolver jogos educacionais e advergames (publicidade em forma de jogos) para empresas como um trabalho freela.

Assim como em toda área, é importante você se profissionalizar, seja em programação, modelagem, design ou até mesmo em composição musical, tão importante nos jogos. Sendo assim, vamos abordar nesse artigo algumas ferramentas que você pode estudar para criar jogos.

Unreal

A Unreal é um kit de desenvolvimento escrito em C++ pela Epic Games. Com essa ferramenta você pode criar jogos em 2D ou 3D.

É uma ferramenta bem famosa e tem sido utilizada com sucesso em uma grande variedade de gêneros de jogos. Mesmo que você seja iniciante nesse ramo pode se aventurar, pois você não precisa de nenhum conhecimento prévio.

Alguns jogos criados com Unreal são: Absolver, Sea of Thieves, Bioshock, etc.

Godot

A Godot é uma poderosa ferramenta de criação de jogos totalmente gratuita e de código aberto. Através da linguagem GDScript você pode criar jogos tanto em 2D quanto em 3D.

Possui uma interface bem intuitiva por isso tem uma curva de aprendizado baixa, ou seja, você não terá muita dificuldade para aprender essa ferramenta.

Alguns jogos criados com Godot são: Project Carnival, Anthill, Running Nose, etc.

Unity

A Unity é a ferramenta mais utilizada no mundo, podendo ser feitos jogos 2D e 3D. Permite a criação de jogos para iOS, Android, Windows, Mac, Linux e muitos tipos de consoles. Para essa ferramenta é necessário ter pelo menos um conhecimento intermediário em C#.

Alguns jogos desenvolvidos com Unity são: Super Mario Run, Pokemon Go, Ori And The Blind Forest, etc.

Lua

Lua é uma linguagem de script rápida, flexível e simples que você pode utilizar para criar jogos. Apesar de sua popularidade na área de games, Lua também é muito popular na parte de robótica.

Alguns exemplos de jogos desenvolvidos em Lua são: Angry Birds, Candy Crush, Tibia, Baldur’s Gate, etc.

Você pode escolher a ferramenta que mais se identificar. E é claro, sempre pratique, pois é assim que você irá adquirir experiência e conseguirá evoluir. Uma dica importante é receber feedbacks: seja de outros desenvolvedores e até mesmo de amigos.

Não precisa terminar um jogo para pedir opinião, pode pedir no meio do desenvolvimento mesmo, assim esses feedbacks podem resultar em melhorias para seu jogo. Buscar contato na comunidade também é interessante para troca de experiências e networking.

Vale lembrar que todos esses cursos temos em nossa plataforma e em todos eles você já desenvolve seu primeiro jogo. Dá uma conferida lá! =D

JavaScript Game Engines

Olá, Web Developers!

Podemos usar o elemento <canvas> do HTML5 para criar jogos com JavaScript. Para nos ajudar com tarefas triviais (como gerenciamento de som, animações, física, etc) foram criadas game engines. Listarei as principais.

MelonJS

O melon.js é um framework leve, bem simples de se usar e gratuito. Ele também possibilita a integração com ferramentas de terceiros, aumentando o seu poder.

Para a criação das telas, usa-se o http://www.mapeditor.org

Você pode testar um dos jogos criados com melon.js neste link: http://melonjs.github.io/tutorial-platformer/tutorial_step9/index.html

PlayCanvas

O PlayCanvas nos permite criar jogos 2D e 3D com JavaScript. Ele é gratuito e open source.

Você não precisa baixar nada! O PlayCanvas possui um tipo de IDE que roda diretamente no seu navegador. Todo o código fica armazenado no sistema deles. Ele suporta vários tipos de arquivos, incluindo objetos 3D.

Se você criar uma conta gratuita, seus projetos ficam públicos e terá um limite de 200MB de armazenamento. Para criar projetos privados, é necessário pagar um plano. O plano pessoal é de $15 por mês.

Quando quiser publicar seu jogo, você pode optar por deixá-lo hospedado no PlayCanvas ou baixar o projeto e hospedar onde quiser.

ImpactJS

O Impact é uma das engines de jogos para JavaScript mais conhecidas. Ele é bem leve, poderoso e simples de aprender a usar. Possui seu próprio editor de telas, ferramentas de debug e teste de performance.

A comunidade é bem ativa. Ele também possibilita a criação de Plugins. O mais famoso é o Impact++ (http://collinhover.github.io/impactplusplus/). Esse plugin gratuito acrescenta várias funcionalidades avançadas para você utilizá-las de maneira bem simples.

O valor da licença é de $99. Se você pretende ganhar dinheiro com jogos para HTML5, é um bom investimento.

Phaser

Outra engine bem conhecida é o Phaser. Ele é gratuito e está sempre sendo atualizado pela comunidade no github.

O Phaser também oferece o Phaser Sandbox, que te permite escrever código diretamente do navegador e testá-lo para não precisar baixar nem instalar nada. Depois você pode baixar o código se quiser. E tudo isso sem precisar se cadastrar!
Isso é ótimo para quem quer experimentar o Phaser.

Também há o Phaser Editor, que é uma IDE baseada no Eclipse para a criação de jogos com Phaser. Porém, ela é paga ($30).

Conclusão

Se você está pensando em começar a desenvolver jogos, saiba que o conceito é sempre o mesmo. Isso significa que se você aprender a usar o ImpactJS, terá facilidade em usar o Phaser e vice-versa.

Minha linguagem de programação principal é o JavaScript, mas eu só recomendo o uso dessa linguagem no desenvolvimento de jogos se o seu alvo for apenas o navegador. O código fica leve, o jogo carrega muito rápido e é bem simples de fazer testes com as DevTools do navegador.

Se o seu alvo não for o navegador ou quiser desenvolver para várias plataformas, eu recomendo usar game engines como o Unity3D. Ele exporta código nativo para mais de 25 plataformas diferentes, incluindo HTML5 (WebGL). Isso fará seu jogo ter mais performance do que um jogo escrito com JavaScript exportado como um aplicativo híbrido, sem contar nas várias funcionalidades que o Unity fornece para a criação de jogos 2D e 3D.

O que se pode fazer com JavaScript hoje em dia?

Olá, Web Developers!

O JavaScript inicialmente foi criado como um complemento para o navegador da Netscape. Por muito tempo foi visto como uma linguagem ruim, bagunçada e lenta (e estavam certos).

Mas o JavaScript evoluiu muito. Hoje em dia é bem mais organizado, rápido e possui várias funcionalidades que nos facilitam criar várias coisas. Além disso, a linguagem não se limita mais apenas aos navegadores.

Vamos conhecer algumas áreas onde podemos atuar com JavaScript além do seu uso comum e até além dos navegadores. Dessa maneira você poderá usar seus conhecimentos em JavaScript e escolher entrar em alguma área além da web, como desenvolvimento de jogos, robótica, automação, etc.

Observação: esse post não incentiva o uso de JavaScript para tudo. Há de se ponderar a melhor ferramenta/tecnologia para o problema que se precisa resolver.

Node.js

Node.js

Não tem como começar essa lista sem falar do Node. Ele é basicamente uma ferramenta que executa o JavaScript fora do navegador. Quando instalado, chamamos o Node.js pelo terminal. Como não estamos executando o JavaScript em um navegador, os cuidados com segurança são diferentes.

Há várias funcionalidades disponibilizadas para o Node.js, fazendo com que possamos fazer coisas com JavaScript que não conseguimos fazer quando o nosso ambiente é o navegador.

Um exemplo é o acesso a arquivos. Um código JavaScript no navegador não consegue acessar os arquivos do usuário, pois seria uma falta de segurança você entrar em um site e ele vasculhar seu computador.Como o Node.js está instalado em sua máquina, o JavaScript tem liberdade de acessar os arquivos contidos no HD.

O Node.js possibilitou a criação de várias outras ferramentas para podermos usar JavaScript fora do navegador, e hoje em dia é um conhecimento obrigatório para quem quer trabalhar com JavaScript.

https://nodejs.org/

npm

O Node.js vem com o “npm” (node package manager). Com ele podemos gerenciar as dependências de nossos projetos.

Um exemplo: caso queira usar jQuery em seu projeto, ao invés de ter o trabalho de fazer download do jQuery, basta executar o comando:

$ npm install jquery

Caso queira atualizar a versão do jQuery em seu projeto, basta executar o comando:

$ npm update jquery

O npm também pode ser usado para instalar outros programas que podem nos auxiliar no desenvolvimento de nossas aplicações e executar comandos.

https://www.npmjs.com/

Testes

Quando estamos escrevendo código é preciso fazer muitos testes para assegurar que nossas funções estão retornando o valor esperado. É bom sempre testar a mesma função passando vários valores diferentes, inclusive valores que a função não aceita para ver se há necessidade de criar um tratamento para a aplicação não quebrar.

Acontece que qualquer alteração em uma função pode afetar outras funções. Então há ferramentas que facilitam a criação de testes.

Os mais famosos são: QUnit, Mocha e Jasmine.

Qualidade de Código

Quando estamos escrevendo nosso código, é muito importante mantê-lo com qualidade. Uma característica de um código de qualidade é mantê-lo uniforme.

Isso inclui sempre identar o código, padronizando a quantidade de espaços ou se será usado “tab”, se ao criar uma função você irá abrir chaves “{“ na mesma linha ou em uma linha nova, etc.

Há ferramentas como o JSLint e JSHint que analisam o nosso código e indicam se estamos mantendo as regras que foram definidas.

Automatização de Tarefas

Quando estamos desenvolvendo é comum precisarmos realizar certas operações para melhorar o nosso código. Um exemplo é minificar o nosso código, fazendo com que os arquivos fiquem menores, o que faz a aplicação ser carregada mais rapidamente pelo navegador.

Outras tarefas podem ser a execução de testes de qualidade, como o JSLint, ou testes de software, como o Jasmine.

Para nos auxiliar temos os automatizadores de tarefas. Os mais famosos são o Grunt e o Gulp. Podemos definir qualquer tarefa e pedir para que estas ferramentas as executem para nós.

Imagine que quando salvamos um arquivo, ele deve ser testado pelo Jasmine, analisado pelo JSLint e, se todos os testes passarem, iremos minificar o arquivo.

E mais! Podemos querer também que se tudo der certo, ele envie um E-mail para o nosso cliente dizendo que em breve iremos lançar uma nova versão da nossa aplicação!

Eles nos ajudam a automatizar o que quisermos, o limite é sua imaginação!

Servidores

Normalmente os códigos escritos no lado do servidor são feitos com linguagens como Java, PHP, Ruby, etc.

Com o Node.js foi possível começar a escrever código para o servidor com JavaScript. Já houve outras tentativas, mas o Node.js teve mais sucesso.

Os frameworks mais conhecidos para Node.js são: Express, Hapi e Koa.

Também podemos criar código Back End com o Meteor. O Meteor é uma plataforma de desenvolvimento fullstack (front e back end).

Bancos de Dados

O MongoDB é um banco de dados orientado a documentos. O console que usamos para acessar os dados executa JavaScript. Então se você sabe JavaScript, pode ter facilidade em aprender a gerenciar o MongoDB.

https://www.mongodb.com/

Aplicativos Mobile

Com JavaScript também podemos criar aplicativos mobile. A vantagem é usar uma única linguagem de programação para as diferentes plataformas. O modo mais conhecido é usando o Cordova/PhoneGap. Com eles nós criamos aplicações híbridas.

São chamadas de “híbridas” porque unem duas tecnologias diferentes. Por exemplo, o código nativo do Android é escrito em Java. Com o Cordova nós criamos aplicações web comuns, com HTML+CSS+JavaScript. Para acessar funcionalidades do dispositivo, há uma integração do código nativo em Java e nós acessamos essas funcionalidades pelo JavaScript.

Quando abrimos o aplicativo, estamos na verdade abrindo um navegador interno que irá apresentar a nossa aplicação e que pode acessar funcionalidades do dispositivo que não poderíamos acessar a partir de uma aplicação web comum.

Então a ideia de “híbrido” é porque estamos juntando tecnologia web com a tecnologia nativa.

http://facebook.github.io/react-native/

Também podemos criar aplicações nativas. As ferramentas mais conhecidas são o React Native e o NativeScript. Com eles nós criamos telas com XML ao invés de HTML, e podemos estilizar com CSS. Isso será convertido para uma tela nativa de cada plataforma, como Android e iOS. Já as ações são escritas com JavaScript mesmo.

A vantagem disso é que, por ser uma aplicação nativa ao invés de uma aplicação com um navegador, teremos melhor performance do que uma aplicação híbrida.

Outra vantagem é que as aplicações híbridas dependem do navegador padrão do sistema, então corremos o risco de criar um código que o navegador daquele dispositivo não suporte. Em uma aplicação nativa, já que não dependemos de navegadores, não precisamos nos preocupar se haverá suporte para as funcionalidades ou não.

Softwares Desktop

Com o Node.JS também é possível criar aplicações Desktop. Estas aplicações normalmente utilizam o Chromium, navegador de código aberto que está por trás do Google Chrome, e o Node.js.

As telas são feitas com HTML5 e CSS3, e o JavaScript pode se comunicar diretamente com o Node.js, que fica embutido na aplicação.

Atualmente o framework mais utilizado é o Electron, criado pela equipe do GitHub. Com ele já foram desenvolvidos famosos softwares como o Atom, Slack e Visual Studio Code.

https://electronjs.org/

SmartTVs

Também é possível criar aplicativos para SmartTVs. Você irá também usar HTML/CSS/JavaScript. As que dão maior suporte para isso são as TVs da Samsung.

3D

A partir do elemento canvas do HTML5 também temos uma API chamada WebGL. Ela nos ajuda a trabalhar com renderização de gráficos 2D e 3D.

Uma biblioteca que nos ajuda a trabalhar com 3D com JavaScript é o three.js.

https://threejs.org/

Jogos

Também é possível criar jogos com JavaScript. Isso graças ao elemento canvas do HTML5, que nos permite desenhar na tela com JavaScript.

Há várias bibliotecas que nos ajudam a criar jogos com JavaScript.
Uma das mais famosas é o Impact, que é paga. Uma outra famosa, que é gratuita, é o Phaser.

Como os jogos apenas usarão o elemento canvas do HTML5 e JavaScript, você poderá criar jogos para qualquer lugar que os suporte ou possua um navegador.

Pode-se usar ferramentas como o Cordova/Phonegap, mas também há outras ferramentas que ajudam a otimizar jogos feitos com JavaScript para dispositivos móveis.

Plugins

Há softwares que possibilitam a criação de plugins. Isso permite que as pessoas criem novas funcionalidades para eles. Normalmente esses plugins são escritos com linguagens de scripts.

Um exemplo é o PhotoShop. Ele aceita a criação de plugins escritos em JavaScript.

Sistemas Operacionais

Um sistema baseado no Node.js, escrito apenas com JavaScript, foi desenvolvido. É o NodeOS.

Qualquer pacote do npm é um pacote do NodeOS, o qual conta com mais de 475.000 pacotes. O objetivo do NodeOS é fornecer apenas o necessário e o npm cuida do resto. Já que qualquer um pode contribuir com o npm, qualquer um pode criar pacotes para o NodeOS.

Você pode ver mais em:

http://node-os.com/

Programação de Hardwares e Internet das Coisas

Com o Node.JS também é possível controlar hardwares. Podemos então usar o JavaScript para trabalhar além das telas dos computadores e celulares, como controlar drones.

Ao programar placas, podemos criar códigos para até mesmo integrar vários objetos, o famoso “Internet das Coisas” (IoT).
Imagine usar JavaScript para controlar as lâmpadas, portas e janelas de sua casa de acordo com a iluminação do ambiente. Ou que quando o GPS do seu smartphone perceber que você está chegando em casa ou no trabalho, ligue a cafeteira para que o café esteja pronto quando você chegar.

Um exemplo é o noduino, um framework para acessar os controles básicos do Arduino a partir de aplicações web usando HTML5, Socket.IO e Node.JS.

Também há o projeto Tessel. No próprio site você pode comprar as placas para montar o seu produto.

Outro famoso projeto é o Cylon.js. Ele é um framework voltado para robótica, computação física e Internet das Coisas.

Você pode ver mais em:

Hologramas

O JavaScript também é capaz de ser utilizado com hologramas.
Um exemplo é o HoloJS, da Microsoft, que é um framework para criar aplicações holográficas usando JavaScript e WebGL.

Realidade Virtual e Realidade Aumentada

Muito se fala sobre Realidade Virtual e Realidade Aumentada. Um exemplo para realidade aumentada é o JavaScript ARToolKit.

https://github.com/artoolkit/jsartoolkit5

Inteligência Artificial

Também podemos aproveitar o JavaScript na área da inteligência artificial. Há muitas bibliotecas e exemplos.

Uma biblioteca usada para isso é a “deeplearn.js”, que você pode conhecer melhor em:

https://deeplearnjs.org/ .

Concluindo

Hoje em dia várias linguagens de programação tentam estar onipresentes, como é o caso do JavaScript. Porém, nem sempre é algo bom. Não existe “bala de prata”. Há linguagens que estão mais evoluídas e adaptadas para certas áreas.

Mesmo que JavaScript seja minha linguagem principal, há momentos em que prefiro usar outras linguagens de programação, pois admito que possuem ferramentas melhores para se trabalhar e acabam entregando algo com mais rapidez e qualidade.

A vantagem que enxergo em utilizar uma única linguagem em várias áreas é possibilitar que uma pessoa com conhecimento em uma linguagem possa experimentar novas áreas, ou que uma pequena empresa possa reaproveitar os conhecimentos da equipe e códigos para trabalhar com outras tecnologias.

Como um jogo digital é criado?

Olá, Web Developers!

Hoje vou mostrar como um jogo é criado. Para podermos ver ele funcionando aqui no navegador, usaremos JavaScript, mas esse conceito é basicamente o mesmo na criação de jogos com outras linguagens, frameworks e ferramentas, então nem é preciso conhecer a linguagem para entender.

Depois, mostrarei como os conceitos apresentados aqui estão presentes em ferramentas profissionais.

Vamos lá!

A tela (canvas)

Um jogo precisa de um lugar que nos possibilite exibir imagens. Normalmente esse elemento é chamado de canvas, que significa “tela de pintura”. Esse é um elemento que nos permite desenhar e renderizar imagens nele.

No Java e no C# por exemplo, temos a classe Canvas. No HTML5 possuímos o elemento <canvas>, que é o que iremos usar. Será o nosso único HTML. Todo o resto será desenhado no canvas.

Também teremos um CSS simples só para alinhar o canvas no meio da tela.

<canvas id="myCanvas" width="400" height="200" ></canvas>
canvas{
    border: 1px solid black;
    margin: 0 auto;
    display: block;
}

Agora todo o resto será JavaScript!

Desenhando na tela

Vamos fazer um simples desenho no canvas.

// primeiro selecionamos o elemento canvas
const canvas = document.querySelector('#myCanvas');
/* depois pegamos o contexto, que irá nos fornecer as funções
para desenhar no canvas.
*/
const ctx = canvas.getContext('2d');

/* a função "fillRect()" nos permite desenhar um retângulo.
Passamos a posição x, posição y, largura e altura.
*/
ctx.fillRect(25, 25, 50, 50);

Quadrado no Canvas

O que é uma animação?

Uma animação é basicamente a apresentação de várias imagens ligeiramente diferentes. Isso nos passa a ilusão de movimento.

Kirby Walking Sprite

Kirby Walking Sprite

No exemplo acima temos várias imagens que, ao serem exibidas uma após a outra, nos fazem pensar que estamos vendo o personagem se mover.

Cada imagem é chamada de frame(quadro). Quanto mais frames por segundo (FPS), mais natural será a ilusão de movimento. Os jogos hoje em dia costumam trabalhar em 60 FPS.

Então, o que acontece se pegarmos o canvas, limpá-lo, desenhar, limpá-lo novamente e fazer um desenho levemente diferente? Isso mesmo! Teremos a ilusão do movimento.

Para isso, basta desenharmos o quadrado com uma posição diferente a cada momento. Então podemos armazenar a posição em uma variável e criar um looping.

O Looping

Como os jogos são basicamente uma tela de desenho com vários elementos sendo desenhados a todo instante, uma das partes principais de um jogo é o Looping.

Basicamente teremos um Looping Infinito que limpa a tela, desenha os elementos no canvas baseado nas variáveis que possuímos e repete esse processo sem parar.

Vamos mudar um pouquinho o nosso código para ver o que acontece.

const canvas = document.querySelector('#myCanvas');
const ctx = canvas.getContext('2d');
/* declaramos uma variável que armazenará a posição
x do nosso quadrado.
*/
let x = 0;
/* o "setInterval()" repete a execução de uma
função de acordo com um tempo que passamos.
Neste caso, a função se repeta a cada 50 milissegundos.
Isso significa que desenharemos no canvas 20 vezes por
segundo, ou seja, teremos 20 frames por segundo.
*/
setInterval(function(){
    // aqui estamos limpando o canvas inteiro
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // após limpar o canvas, desenhamos o quadrado
    // na posição x
    ctx.fillRect(x, 25, 50, 50);
    // após desenhar o quadrado, alteramos nossa
    // variável x
    x+= 1;
    /* só para não perdermos o quadrado de vista,
    fiz com que o x volte a 0 caso o quadrado
    saia do canvas
    */
    if(x > canvas.width){
        x = 0;
    }
}, 50);

Isso fará com que o quadrado ande pela tela, como você pode ver logo abaixo:

Observação: No JavaScript, ao fazer animações, é recomendado o uso da função requestAnimationFrame() ao invés de setTimeout() ou setInterval();

Carregando imagens

Jogos utilizam vários recursos como áudio e imagens. Vamos criar uma função que irá carregar imagens.

Se tentarmos desenhar a imagem antes dela ter sido carregada, ocorrerá um erro. Então vamos aproveitar as Promises do JavaScript para iniciar o desenho no canvas apenas quando a imagem já estiver carregada.

// ...
/* essa função receberá o endereço de uma imagem
*/
function loadImage(src){
    /* ela retorna uma promise, que permite a
    execução de uma função apenas quando ela
    for resolvida
    */
    return new Promise(resolve => {
        /* criamos um elemento de imagem para
        carregar a imagem.
        */
        var img = document.createElement('img');
        /* criamos um listener que será executado
        assim que a imagem for carregada. Quando a
        imagem terminar de ser carregada, resolvemos
        a promise, retornando a imagem.
        */
        img.addEventListener('load', () => { 
            resolve(img); 
        });
        /* pegamos o elemento de imagem e passamos
        o endereço da imagem. Isso iniciará o
        carregamento
        */
        img.src = src;
    });
}

/* iniciamos o carregamento da imagem. Assim que
a imagem for carregada, a promise é resolvida e
a função seguinte é executada.
*/
loadImage('https://i.imgur.com/WyqxuaD.png')
    .then(function(sprite){
        setInterval(function(){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // desenhamos a imagem ao invés do retângulo
            ctx.drawImage(sprite, x, 25, 50, 50);
            x+= 1;
            if(x > canvas.width){
                x = 0;
            }
        }, 50);
  })

Com isso teremos o Kirby passando pela tela.

Para não termos que tratar a criação de uma animação, usei aqui uma imagem estática mesmo.

Organizando o código: O objeto Game

Até agora só fizemos bagunça. Vamos organizar mais o nosso código, o que nos permitirá ter mais controle também.

const canvas = document.querySelector('#myCanvas');

/* alterei levemente a função de carregar
imagens. Agora ele recebe um objeto em
que armazenaremos a imagem carregada,
e também passamos o nome do campo
em que a imagem será armazenada.
*/
function loadImage(src, storage, field){
    return new Promise(resolve => {
        var img = document.createElement('img');
        img.addEventListener('load', () => {
            storage[field] = img;
            resolve(img);
        });
        img.src = src;
    });
}
/* Todo o código que controla o jogo
ficará dentro desse objeto "Game"
*/
const Game = {
/* guardei o contexto do canvas dentro de Game
*/
    ctx : canvas.getContext('2d'),
/* a função start() será responsável por iniciar
o jogo. Ela executa a função load() e, quando
tudo estiver carregado, inicia o looping.
*/
    start(){
        this.load().then(() =>{
        /* guardo o interval na variável timer.
        Assim seremos capazes de parar o looping do
        jogo caso seja necessário.
        */
            this.timer = setInterval(() => {
            /* o looping executa essas duas funções.
            Logo veremos o que elas fazem.
            */
                this.update();
                this.draw();
            }, 30);
        })
    },
    /* a função stop() limpa o nosso interval, fazendo
    o jogo parar de ser executado.
    */
    stop(){
        clearInterval(this.timer);
    },
    /* a função load() é onde nós iremos carregar nossas
    imagens. Quando tudo é carregado, ele retorna uma promise.
    Assim garantimos que o jogo só será inicado quando
    todos os recursos estiverem carregados.
    */
    load(){ 
        return loadImage('https://i.imgur.com/k6heF1k.png', Game, 'background');
    },
    /* criei a função clear() para facilitar a limpeza do canvas.
    */
    clear(){
        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    /* a função draw() será responsável por executar
    tudo o que for relacionado em desenhar algo no canvas.
    Em sua primeira linha nós já executamos o clear().
    */
    draw(){
        this.clear();
        this.ctx.drawImage(this.background, 0, 0, canvas.width, canvas.height);
    },
    /* a função update() serve para atualizarmos algum valor.
    Imagine que você queira criar um "relógio". Como a 
    função update() fica sendo executada pelo looping,
    podemos ir atualizando o tempo nela. Com o valor
    alterado, a função draw() cuidará do resto.
    */
    update(){
    }
}

/* chamamos essa função para iniciar o jogo.
Por enquanto tiramos o Personagem. Temos só
o fundo. Criaremos o personagem a seguir.
*/
Game.start();

Criando um personagem: O objeto Character

Agora que temos o objeto Game cuidando de tudo, está mais fácil criarmos outros objetos que estarão presentes no nosso jogo.

Vamos criar um personagem que poderemos controlar.

Em um jogo real, para poder reutilizar o código, seria mais comum criarmos uma classe. Mas como a ideia aqui é simplificar só para fins didáticos, eu vou criar um objeto literal mesmo.

// criamos o objeto Character para o nosso personagem
const Character = {
/* declaramos algumas variáveis que nos permitirão
ter mais controle do personagem.
Ao criar o seu jogo, poderá criar as variáveis que quiser.
*/
    x: 50, // controla a posição horizontal
    y: 125, // controla a posição vertical
    speed: 5, // controla a velocidade do movimento
    /* a função start() é executada apenas uma vez
    quando o personagem é inserido na tela
    */
    start(){
    /* aqui aproveitamos a funçõa start() para
    começar a escutar eventos do teclado.
    Verificamos se determinada tecla está sendo
    pressionada, e assim alteramos o valor da
    variável x, que fará com que o personagem
    seja desenhado em uma posição diferente,
    dando a ilusão de movimento.
    */
        window.addEventListener('keypress', (event) => {
            const key = event.key;
            switch(key){
                /* note que alteramos o valor
                da variável de posição com o valor
                que indicamos na variável de velocidade.
                */
                case 'a': this.x -= this.speed; break;
                case 'd': this.x += this.speed; break;
            }
        });
    },
    /* a função draw recebe o contexto do canvas e
    desenha a imagem do personagem, armazenada na
    variável sprite.
    Veja que desenhamos com base nas variáveis
    que declaramos.
    */
    draw(ctx){
        ctx.drawImage(this.sprite, this.x, this.y, 32, 30);
    },
    /* e também declaramos uma função update() caso
    seja preciso.
    */
    update(){
    }
}

Inserindo o personagem no jogo

Agora que temos um objeto Character pronto para ser usado, temos que inseri-lo no jogo. Vamos então fazer algumas alterações no objeto Game para inserir nosso personagem no jogo.

const Game = {
    // ...
    start(){
        // chamamos o start() do personagem.
        Character.start()
        this.load().then(() =>{
            this.timer = setInterval(() => {
                this.update();
                this.draw();
            }, 30);
        })
    },
    // ...
    load(){
    /* agora estamos fazendo com que o load()
    aguarde o carregamento do sprite do personagem
    e do background do jogo.
    */
        return Promise.all([
            /* carregamos o sprite do personagem
            e armazenamos a imagem na propriedade
            sprite dentro de Character
            */
            loadImage('https://i.imgur.com/WyqxuaD.png', Character, 'sprite'),
            loadImage('https://i.imgur.com/k6heF1k.png', Game, 'background'),
        ]);
    },
    // ...
    draw(){
        this.clear();
        this.ctx.drawImage(this.background, 0, 0, canvas.width, canvas.height);
        /* Adicionamos a chamada da função draw()
        de Character
        */
        Character.draw(this.ctx);
    },
    // ...
}

Agora sim temos a seguinte tela:

Kirby - Green Greens

E com as teclas “A” e “D” você pode controlar o Kirby para a direita e esquerda.

O que aprendemos sendo usado na prática

Vamos ver o que aprendemos sendo usado por ferramentas profissionais.

Phaser

Phaser

Uma ferramenta muito usada para criar jogos com JavaScript é o Phaser.

https://phaser.io/examples/v2/games/breakout

No link acima temos um exemplo de um jogo clássico. Se você olhar o código que está junto, verá que o funcionamento é bem parecido com o código que criamos manualmente:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
/*
Iniciamos um novo jogo com a função "Phaser.Game()".
Para essa função, passamos o tamanho do canvas
(800x600).
No final, temos um objeto que passa as funções
preload(), create() e update().
preload() serve para carregar os recursos do
jogo antes dele ser iniciado, e para isso chamamos
"game.load".
create() é a função executada uma única vez
quando o jogo é criado.
update() é a função que é executada várias
vezes enquanto o looping estiver ativo.
*/

Game Maker

GameMaker Studio

O GameMaker é muito conhecido por possibilitar que as pessoas criem jogos sem saber programar. Você pode simplesmente arrastar ícones para criar a lógica do seu jogo.

Apesar disso, o GameMaker possui uma linguagem de programação própria que é bem simples de se aprender, possibilitando fazer coisas bem mais avançadas.

GameMaker IDE

Note que na edição da lógica temos a parte “Events”. Nele temos o evento “Create” (igual ao que conhecemos) e o evento “Step” (igual ao update). Vários outros eventos podem ser adicionados.

Unity3D

Unity3D

Outra ferramenta bem conhecida é o Unity3D, uma ferramenta bem completa para a criação de jogos e que exporta código nativo para mais de 25 plataformas. A linguagem usada é o C#.

Adam

Vamos dar uma pequena olhada em uma classe criada com C# para o Unity:

using UnityEngine;
using System.Collections;

public class Character : MonoBehaviour {

    public float speed = 0.5f;

    // Use this for initialization
    public void Start () {
        // ...
    }

    // Update is called once per frame
    public void Update () {
        // ...
    }
}

Com o Unity temos uma IDE completa para o desenvolvimento de jogos. Note que ainda temos funções como Start() e Update().
Agora você já sabe o que essas funções fazem né?

Também temos outros métodos que são chamados em determinados momentos, que facilitam muito na hora de desenvolver as ações. Um exemplo é o Awake(), OnGUI(), OnDestroy(), etc.

Conclusão

Entender como um jogo funciona é uma ótima base para conseguirmos entender como as ferramentas para a criação de jogos funcionam, facilitando o aprendizado.

Vimos então que jogos possuem um looping que desenha em uma tela com base nas variáveis, as quais podem ser alteradas de acordo com nossas ações. E esse conceito está presente em todas as ferramentas de desenvolvimento de jogos, desde as mais simples até as mais profissionais.

As ferramentas nos ajudam a tratar o carregamento de arquivos, como executar áudio e vídeo, como renderizar imagens, simular física (colisões, gravidade, atrito, etc), construção de cenários e posicionamento de objetos, desenvolvimento de animações, gerenciamento dos controles, otimização de memória, etc.

NavMesh na Unity 3D

Um assunto muito importante mas pouco discutido dentro do mundo dos desenvolvedores de jogos é a utilização do NavMash. O que é algo estranho, já que a não utilização dessa ferramenta pode desencadear uma porção incalculável de bugs que seriam uma vergonha para o resto da vida. Agora, você deve estar se perguntando sobre qual ferramenta é essa que estamos falando, né?

Vou explicar. Certamente você já deve ter jogado algum game onde um dos NPCs fica travado em algum lugar, porém, correndo como se estivesse competindo na São Silvestre.

Se você já assistiu o filme Detona Ralph sabe que essa cena faz uma piada com um bug, o que era comum na época mas que persiste até hoje que é o de um personagem ser barrado por uma parede ou qualquer outro objeto, mas mesmo assim continuar andando.

Esse bug já era tosco na época e continua sendo até hoje. Só que o mais estranho é que mesmo com o passar dos anos os desenvolvedores pensam mais em efeitos visuais do que em evitar coisas desse tipo. Não é difícil evitar uma bizarrice dessa, game engines atuais geralmente oferecem uma forma simples de se contornar esse problema.

Então, nesse artigo, veremos como evitar esse tipo de problema em uma das game engines mais conhecidas e usadas no mundo, a Unity.

Se você não conhece a Unity, aconselho que visite o seguinte site:

https://unity3d.com/pt

Dê uma olhada em tudo o que essa fantástica ferramenta pode te oferecer, e tenho certeza que vai adorar, depois faça o download e continue lendo.

Ah, claro, se tiver interesse, temos alguns cursos sobre essa maravilhosa engine no TreinaWeb:

Com a Unity instalada, você vai ter a opção de criar um projeto. Selecione “Projetos 3D” e depois defina um nome e um local para salvá-lo.

Feito isso, nosso projeto será criado e teremos como resposta a seguinte imagem:

Veja que o projeto está vazio, tendo apenas alguns poucos objetos dentro de cena, como uma câmera e uma Luz. Então, para reproduzir um efeito NavMesh precisamos criar um pequeno cenário, onde podemos usar uma Plane como chão, alguns cubos como obstáculos e um cilindro para representar um personagem. Então, mãos à obra!

Primeiro, para criar uma plane para chão, é necessário ir no menu superior na opção GameObject => 3D Object => Plane.

Feito isso, você vai ter uma plane adicionada à sua cena, como mostra a imagem abaixo:

Agora, para criar os cubos que vão servir de obstáculos, é preciso ir novamente ao menu superior em GameObject => 3D Object => Cube.

Isso fará com que um cubo seja criado dentro da nossa cena, como mostra a imagem abaixo:

Repita esse processo algumas vezes para criar um número de obstáculos que deixe o exemplo mais interessante.

Veja que no meu caso criei 4 cubos.

Ok, até esse ponto tudo andando perfeitamente, mas a visualização da cena esta muito ruim, então vamos criar materiais para dar uma cor para o chão e para os cubos. Para fazer isso, basta ir na aba Project, clicar com o botão direito do mouse sobre a pasta Assets (àquela que é criada por padrão dentro da Unity).

Clique com o botão direito sobre essa pasta e selecione a opção Create => Material.

Isso vai criar um material padrão com a cor branca.

Veja que para esse material dei o nome de “Chão”, seguindo essa mesma lógica, vou criar mais um material com o nome de “obstáculo”.

Veja:

Agora, basta mudar as cores de cada material e depois aplicar em cada objeto dentro da cena. Para mudar a cor do material é muito simples, clique na caixa de cor branca ao lado de Albedo.

Na caixa de seleção de cores escolha uma cor para o chão e depois repita esse processo para adicionar uma cor para o obstáculo.

Veja:

Agora, clique e arraste cada um desses materiais para seus devidos objetos em cena para que seja possível conseguir um resultado como o exibido na imagem abaixo:

Estamos com a nossa cena pronta. Vamos adicionar um caminho para ser percorrido. Para que isso seja feito é necessário antes de tudo determinar todos os objetos de cena como estáticos. Isso é feito selecionando cada um deles e deixando marcado a opção Static.

Agora nos resta criar o caminho a ser percorrido pelo personagem. Esse caminho é criado com auxílio da janela Navigation que se não estiver em evidência pode ser adicionada à interface da Unity clicando em Window => Navigation.

Prontinho! Agora essa janela estará disponível na Unity como podemos ver na imagem abaixo:

Para criar o caminho é muito simples, apenas clique em Bake e veja a mágica acontecer:

Veja que no chão da nossa cena foi criado um caminho em azul claro, isso significa que o personagem só vai andar sobre aquela região, sendo possível identificar os obstáculos e analisar as melhores rotas para chegar em um determinado local.

Agora, vamos criar um personagem para percorrer esse caminho. Crie um cilindro dentro dessa cena indo até o menu superior GameObject => 3D Object => Cylinder.

Vamos posicionar esse cilindro na cena, como mostra a imagem abaixo:

Para que tenhamos efeitos físicos nesse objeto, precisamos adicionar a ele um componente chamado RigidBody que oferece características físicas ao cilindro, fazendo com que o mesmo sofra com a força da gravidade, por exemplo.

Agora vamos adicionar o NavMeshAgen. Esse componente pode ser adicionado ao cilindro indo até o menu superior em Component => Navigation => NavMeshAgent.

Ele atribui ao cilindro algumas características como aceleração, velocidade entre outras que podemos notar na imagem abaixo:

Maravilha! Agora sim fechamos a etapa de construção do NavMesh de sua forma visual. Para finalizar, vamos criar um código para fazer com que tudo isso ganhe vida.

Para criar o código é necessário ir na aba Project dentro da pasta Assets e criar um arquivo de código C# ou JS, no meu caso vou criar um C# veja:

Veja que para criar um arquivo de código é muito simples, basta clicar com o botão direito sobre a pasta Assets, depois em Create e por fim escolhemos o tipo de código que o arquivo deve ter. Com o arquivo criado, podemos dar um nome para ele, no meu caso o chamei de NavScript.

Clique duas vezes sobre ele para abri-lo e escreva o seguinte código:

using UnityEngine;
using System.Collections;

public class NavScript : MonoBehaviour {
    private NavMeshAgent Agent;
    public Transform Alvo;

    void Start () {
        Agent = GetComponent<NavMeshAgent> ();
    }

    // Update is called once per frame
    void Update () {
        Agent.SetDestination (Alvo.position);
    }
}

Veja que a primeira coisa que fiz foi criar dois atributos onde um pega o NavMeshAgent e o outro pega o alvo que será o local onde o cilindro precisa chegar.

private NavMeshAgent Agent;
public Transform Alvo;

Depois em Start() é necessário pegar o componente do NavMeshAgent com a seguinte linha de código:

Agent = GetComponent<NavMeshAgent> ();

E por fim, em Update(), vamos adicionar o código que faz com que o cilindro se movimente até chegar no alvo.

Agent.SetDestination (Alvo.position);

Nesse momento, você deve estar um pouco confuso, não? Afinal, não falamos de nenhum alvo na construção da nossa cena, né? Mas, tudo bem, isso será criado agora!

Dentro da cena vamos criar um cubo que será o alvo. Veja:

Aí está! Esse cubo é o alvo do nosso cilindro. Agora vamos adicionar o código que criamos ao cilindro. Para fazer isso, basta “arrastar” o código sobre o cilindro. Depois disso, com o cilindro selecionado, vamos adicionar ao campo de alvo o cubo que acabamos de criar, também arrastando o cubo até o local apresentado na imagem abaixo.

Pronto! Agora é só executar o exemplo e ver tudo funcionando. Espero que tenham gostado dessa dica Gamer. =)

Até a próxima!

JUNTE-SE A MAIS DE 150.000 PROGRAMADORES