Como criar um jogo de plataforma básico do Unity

)

Criar jogos baseados em navegador no Unity WebGL pode ser bastante recompensador - existem muitos sites de portal de jogos que dividem a receita de anúncios com você ou compram seus jogos diretamente de você. Se você for talentoso, pode facilmente ganhar vários milhares de dólares por mês em participação na receita de anúncios. O Unity with WebGL é uma das melhores ferramentas para isso e, com os plug-ins WebVR, você também pode fornecer suporte de RV aos seus jogos com bastante facilidade.

Então, se você está se perguntando como criar jogos Unity WebGL, continue lendo!



Requisitos

  • Unidade
  • Conhecimento de HTML5 / JavaScript
  • (Opcional) Um bom editor de texto como Bloco de notas ++

Para começar, baixe e instale o Unity, e certifique-se de instalar o componente de suporte WebGL.





Quando o Unity for iniciado pela primeira vez, reserve um minuto para se acostumar com a IU e os menus, especialmente o Hierarquia painel - contém todos os elementos da cena atual. É basicamente a visualização principal de tudo em que você está trabalhando, seja um nível de jogo ou o menu principal.

Você também tem o jogos guia (para testar o jogo dentro do editor), e à direita está o Inspetor painel. É aqui que os elementos podem ser editados, por exemplo, luzes, atores, etc.

Se você clicar no Luz Direcional no menu Hierarquia, ele lhe dará um monte de informações sobre essa luz em particular, e você poderá ativar / desativar as sombras projetadas por ela.



Finalmente, você tem o Projeto janela na parte inferior, que apenas mantém uma guia dos arquivos que estão sendo usados ​​para criar seu projeto.

Depois de se familiarizar um pouco com a IU, vá em frente e salve a cena atual. Vamos para Arquivo> Salvar cena e abrirá uma caixa de diálogo para uma pasta “Ativos”. É uma prática padrão manter as coisas organizadas em subpastas ao desenvolver jogos, então crie uma subpasta chamada “ Cenas ” e salve a cena nele.

Agora vamos criar algo realmente simples - um tipo de jogo de 'plataforma', onde nosso personagem apenas salta em torno das plataformas. Cair significa morte. Faremos isso em 3D / visualização em primeira pessoa, então um personagem realmente não modela - na verdade, vamos apenas usar um objeto 'esfera' simples para o nosso personagem, porque é o mais simples de criar.

Então no Hierarquia painel, clique em “Criar” e edite estas propriedades:

  • Posição {X: 0, Y: 2,5, Z: 0}
  • Escala {X: 0,3, Y: 0,3, Z: 0,3}

Se você pressionar o “ Toque ”, Ele deve exibir uma esfera simples na visualização da câmera. Agora queremos adicionar gravidade e física de salto ao nosso “personagem”.

Então no Inspetor painel, adicione um componente à esfera e escolha Corpo rígido - também, não queremos que a esfera girar , então vá para Constaints> escolha todos os eixos no Rotação área.

Agora precisamos criar algum tipo de plataforma para que nosso personagem não caia indefinidamente no jogo. Portanto, adicione um cubo e defina o Escala Y valor para 0,1 - agora, se você “tocar” a cena novamente, nosso personagem deverá “cair” no cubo.

Agora vamos adicionar um pouco de física, de modo que nosso personagem 'pule' um pouco quando atingir a plataforma do cubo. Precisamos criar um novo material de física e aplicá-lo à esfera, para fazer nosso personagem ter propriedades saltitantes.

Crie uma nova subpasta no Ativos e nomeie-o como “Materiais” e, em seguida, crie um novo material de física. Chame de “Bouncy_blob” ou o que quiser.

Agora no Inspeção painel, adicione estes valores ao material bouncy:

  • Fricção Dinâmica: 10
  • Ficção estática: 10
  • Bounciness: 1
  • Combinação de fricção: máximo
  • Bounce Combine: Máximo

Devemos também adicionar um material de física à plataforma abaixo de nossa esfera - isso será feito para que nossa esfera salte com altura crescente a cada salto. Portanto, crie outro material e nomeie-o como “Platform_bouncing” e atribua a ele os valores de:

  • Fricção Dinâmica: 0,9
  • Ficção estática: 0,9
  • Bounciness: 1
  • Combinação de fricção: média
  • Bounce Combine: Multiply

Agora, quando você pressiona o botão “Play”, você notará que nosso personagem salta mais alto a cada salto.

Para adicionar um pouco de cor / textura à plataforma, crie um novo material e clique na guia “Albedo”, depois dê uma cor. Você pode arrastar e soltar este material na plataforma, e ele mudará de cor.

Para uma perspectiva em primeira pessoa, você só precisa arrastar e soltar a câmera no Hierarquia painel em nossa esfera - isso fará com que a câmera siga nosso personagem o tempo todo. Essa premissa permanece a mesma para qualquer tipo de jogo Unity na primeira pessoa - mas se você estiver criando um jogo FPS multiplayer como Greve de líder , Torna-se um pouco mais avançado, pois você terá várias câmeras configuradas por modelo.

Em qualquer caso, você precisa editar a câmera assim:

  • Posição {X: 0, Y: 1, Z: 0}
  • Rotação {X: 90, Y: 0, Z: 0}
  • Escala {X: 2,5, Y: 2,5, Z: 2,5}
  • Sinalizadores claros: cor sólida
  • Antecedentes: # 000
  • Campo de visão: 80,3

Agora, para nos dar uma sensação de “perspectiva” na altura do salto, adicionaremos um holofote. Portanto, ajuste os valores de destaque para:

  • Rotação {X: 90, Y: 0, Z: 0}

Agora queremos programar os controles do jogo, para que possamos usar nosso mouse para controlar o movimento do personagem. Precisamos de um script para isso.

No Projetos painel, adicione uma nova pasta com o nome “Scripts”. Agora adicione um JavaScript ao Câmera e nomeie-o “InputController”, e também adicione-o à pasta “Scripts” que você acabou de criar. Agora, ao clicar duas vezes no script, você pode editar suas propriedades.

Quando você abre o script no editor de script padrão do Unity, ele deve ter a seguinte aparência:

Portanto, queremos que a variável “GameObject” faça referência ao nosso personagem - para isso, você pode simplesmente voltar para a visualização da câmera do Unity e arrastar / soltar nossa esfera no campo de entrada.

Agora queremos atribuir metade da largura e altura da tela para a função Iniciar. Portanto, edite o script para ficar assim:

Agora precisamos apenas dos valores do mouse (para quando ele for movido pelo jogador). Precisamos chamar a função Atualizar para fazer isso. Portanto, ajuste o script na variável Update:

Para explicar um pouco, as variáveis ​​X e Z são para o eixo do controlador - queremos que elas manipulem a posição do nosso personagem quando enviamos a entrada do controlador para o jogo. Precisamos fazer referência à variável Input.mousePosition, que nos dá um vetor 2D. Este vetor 2D precisa ser adicionado ao nosso rastreamento de coordenação, então vamos chamar uma função setHeroPosition com os valores como argumentos.

Portanto, crie um novo script, chame-o HeroController e anexá-lo à nossa esfera / personagem. Edite o script para ficar assim:

Agora, ao pressionar o botão “Jogar”, você poderá navegar pelo personagem pela plataforma usando o mouse e até cair da plataforma! Nosso objetivo final é criar um jogo de plataforma semelhante a Vida curta , Então vamos aprofundar este jogo um pouco mais no próximo guia.

Isso conclui o básico da criação de uma jogabilidade muito simples no Unity - na próxima parte deste guia, veremos como adicionar mais cenários ao nível, adicionar um menu de jogo e exportar tudo para um site usando WebGL , para jogar em um navegador.

Criação de plataformas procedimentais

Então, na primeira parte deste tutorial, acabamos de fazer uma plataforma básica na qual seu personagem pode pular ( e cair para o seu destino) - mas para um verdadeiro jogo de plataforma, precisamos adicionar plataformas adicionais. Mas não queremos adicionar um milhão de plataformas - queremos que o Unity automaticamente crio plataformas enquanto nosso personagem salta junto.

Para isso, precisamos de um modelo de plataforma - também conhecido como “pré-fabricado”. Prefab é a abreviação de pré-fabricado, e significa simplesmente “pré-fabricado” - geralmente uma cópia de um objeto de jogo que você pode reutilizar indefinidamente. Na verdade, pré-fabricados podem conter hierarquias de objetos do jogo, o que significa que você pode “pré-fabricar” uma cena inteira de objetos do jogo.

Então o que você precisa fazer é criar uma nova pasta de ativos chamada Pré-fabricados , em seguida, arraste e solte nossa plataforma do Hierarquia painel para esta nova pasta. Prefabs serão reconhecíveis no painel Hierarquia pela cor azul.

Agora, para instruir o Unity a criar plataformas procedurais, precisamos criar um script chamado GameManager e anexá-lo à câmera. Os scripts do GameManager basicamente contêm instruções importantes para o motor retransmitir para a jogabilidade - neste caso, ele gerará plataformas à medida que nosso personagem avança.

A razão de o anexarmos à câmera é porque a câmera nunca é destruída e permanece constante - portanto, o script nunca é destruído e permanece constante ao ser anexado a ele.

Aqui está o que precisa ser incluído no script:

Para explicar este código um pouco, é necessário criarmos uma referência tanto para o painel pré-fabricado quanto para a esfera (nosso personagem), então você precisa arrastá-los e soltá-los em seus slots específicos em seu editor.

Este código também contém três variáveis ​​privadas - as linhas que começam com var privado. Eles irão instanciar (fazer referência) o painel pré-fabricado das seguintes maneiras:

  • Limite var privado: float coloca um limite no eixo y, então quando nosso personagem pula superior além deste limite, um novo painel será criado.
  • Rotação var privada: Quaternion; simplesmente adiciona uma rotação necessária para instanciar nossos pré-fabricados - no entanto, estamos adicionando rotação = Quaternion.identify; Porque isso instrui o motor a não girar o objeto do jogo. O objeto (nossos painéis pré-fabricados) estará literalmente “perfeitamente alinhado” com o mundo.
  • A variável privada final lastPlatformPosition irá lembrar e salvar a posição da última plataforma como um vetor 3D (basicamente, as plataformas não vão desaparecer atrás de você, então você pode voltar no mundo do jogo se quiser).

Neste próximo trecho do roteiro, vamos adicionar um cheque para cada quadro se nossa esfera (personagem) está ou não acima do limite (que gera novas plataformas) - se nosso personagem está acima do limite, nós iremos aumentar o limite para criar um novo painel / plataforma mais alto que o anterior.

Nossa próxima etapa é adicionar o código que determina a próxima posição do painel:

Estamos usando um fazer enquanto loop neste código para garantir que os valores X e Z do vetor (sua posição no mundo do jogo) não sejam idênticos às plataformas anteriores - portanto, nossas plataformas geradas por procedimento sempre estarão aumentando em altura.

Claro, não queremos que esses valores sejam estritamente colocado - um pouco de aleatoriedade é uma coisa boa, caso contrário, estaremos apenas fazendo uma escada perfeita. Então, estamos usando o Random.Range , entre os valores -1 e 2, para chamar valores aleatórios para X e Z. Você pode brincar um pouco com esses números se quiser brincar.

Criação de um menu de jogo

Até agora, criamos um 'jogo' onde você pode pular com altura crescente e mover o mouse para controlar a direção. O problema é que se você cair da plataforma, vai cair indefinidamente - precisamos criar um script em um menu de “morte” / jogo para começar de novo.

Então, basicamente, vamos escrever um script que verifica se nossa esfera (personagem) fica abaixo a primeira plataforma do jogo . Nesse caso, o script carregará uma nova cena.

Nosso primeiro passo será verificar se a esfera caiu abaixo de um limite específico. Vá para o GameManager script que fizemos anteriormente e olhamos para o E se declaração do atualizar função.

Vamos usar um mais se declaração aqui, para verificar se a posição da nossa esfera está abaixo de -2,0 unidades da posição Y - se for, nossa função privada fim de jogo vai ... bem, esse pedaço de script é autoexplicativo.

A última parte do script é a função a ser usada para lidar com um estado de “fim de jogo” e carregar nosso menu de jogo.

Isso lembra a Inscrição classe - podemos chamar o LoadLevel função para trazer uma nova cena, que neste caso, é simplesmente o nosso menu do jogo - lembre-se que basicamente tudo no Unity são “níveis”. Os menus principais (Start Game - Options - Credits - Etc.) são basicamente apenas níveis / cenas com pedaços de texto clicável. Mais ou menos como as telas de carregamento do Skyrim, hein? Eles são apenas modelos 3D em um espaço mundial vazio com uma barra de carregamento.

Em qualquer caso, precisamos criar uma cena por meio Arquivo> Nova cena , e dê a ele o nome Cardápio ao salvá-lo. Então, vamos adicionar as duas cenas ao processo de construção. Isso é feito através de Arquivo> Configurações de compilação .

Nossa cena de menu ainda deve estar aberta, então apenas clique no botão “Adicionar Atual” e adicione a cena ao seu Configurações de compilação - faça isso novamente com a cena nivelada.

Quando morremos no jogo, o script que criamos deve fazer a transição do nível do jogo para a cena do menu.

Adicionar um botão “Iniciar” para jogadores

Agora, podemos jogar o jogo em modo de teste, mas a partir de agora, os jogadores não têm como iniciar o jogo se o carregássemos em algum lugar. Portanto, precisamos criar um menu de jogo que tenha um botão para iniciar o jogo.

Então mude para a cena do menu do jogo e adicione este bit à câmera ( no painel Inspetor, lembre-se do pt. 1 deste tutorial?).

  • Sinalizadores claros: cor sólida
  • Antecedentes: # 000
  • Largura: 200
  • Altura: 60

Isso nos dará um fundo preto sólido para o nosso menu de jogo - isso é feito em Valores RGB , não hex - então o azul seria 001, o verde seria 010, o vermelho seria 100, etc. Eu poderia explicar isso para você, mas tudo que você precisa fazer é o “seletor RGB” no Google se quiser uma cor específica.

Seguindo em frente, precisamos adicionar nosso botão para iniciar o jogo. Isso é feito através de Elementos da IU - basicamente, podemos adicionar elementos de interface do usuário da mesma maneira que adicionamos elementos 3D, por meio do Hierarquia painel. Então vá em frente e crie um Botão UI , e você verá alguns novos elementos no Hierarquia painel:

  • EventSystem
  • Tela de pintura
  • Botão
  • Texto

Para quebrar isso - o tela de pintura é o nosso contêiner para todos os elementos da IU, e podemos torná-lo responsivo ( por responsivo quero dizer “dimensionamento para o tamanho da tela”, não responsivo como se responderia às perguntas que você faz. É melhor deixar isso para os scripts de IA). Em qualquer caso, vamos mudar a posição do botão para este:

  • Transformação Rect {Pos X: 0, Pos Y: 0, Pos Z: 0}
  • Transformação Rect {Largura: 200, Altura: 60}

Para tornar isso um pouco mais elegante, você pode remover a 'imagem de origem' do botão e definir uma cor para ela. E para alterar o texto do botão, basta editar o Texto elemento para algo como “START GAME”, e dê a ele um tamanho de fonte em torno de 16.

Para fazer o botão clicável , vamos adicionar uma função ao script UIController no Botão elemento. Basta adicionar este trecho de código abaixo:

Aplique esta função ao botão Inspetor configurações, e no Botão (script) configurações de componentes, vamos simplesmente adicionar uma função que é executada quando o jogador clica em nosso botão Iniciar. Portanto, basta adicionar uma função ao Ao clicar () evento e arraste / solte o botão Iniciar jogo no campo de entrada. Finalmente, selecione a função recém criada no script UIController ( UIController.StartGame)

Podemos aplicar esta função no botão Inspetor configurações. Nas configurações do componente Botão (Script), podemos executar uma função sempre que um jogador clica nela. Para isso, adicionamos uma nova função ao evento On Click (), clicando no botão + ícone. Agora podemos arrastar e soltar o próprio botão no campo de entrada. Em seguida, selecionamos a função que acabamos de escrever no script UIController (UIController.StartGame).

Como exportar / publicar como um jogo de navegador WebGL

Abra as configurações de construção e escolha WebGL como sua plataforma de destino. Agora clique no Mudar de plataforma botão e, finalmente, clique no Construir botão e dê um título ao seu jogo. Depois de compilado, ele será exportado / salvo como um arquivo .HTML, que pode ser aberto / visualizado em qualquer navegador habilitado para WebGL. Embora se você quiser publicar seu jogo, existem dois métodos para conseguir isso:

  • Faça upload do seu jogo para algum tipo de host de arquivo (Dropbox, Google Drive, etc) e compartilhe o link. Isso é útil para pequenos demos você deseja mostrar para amigos ou clientes em potencial ( websites de portal de jogos que compram seu jogo ou configuram uma receita de compartilhamento de anúncios com você).
  • Carregue seu jogo em um servidor FTP de sua propriedade e incorpore-o em um