If you're excited to start creating your own 2D games, and have been following some of my previous posts, you should keep reading this. I'll guide you through the very basics to get you started with Phaser 3, a powerful tool for creating games in the JavaScript language.

I'd like to remind new readers that there will be a major Game Jam hosted by Gamedev.js, check out the details on: Gamedev.JS Jam 2024 is Coming in April [+PRIZES] - An Opportunity for Game Developers to Be Recognized (English/Português)

Introduction to Phaser

What is Phaser 3?

Download: https://phaser.io/download
Phaser 3 is an open-source framework for developing 2D games using JavaScript. It offers an impressive range of features to create games of all types and sizes, from simple platformers to complex RPG adventures. However, instead of the well-known Game Engines that I present here, it does not contain an interface to run your code, instead we use third-party code editors, like Visual Studio Code.

Why use Phaser 3?

While as I mentioned in the context above about a lack of interface for it, Phaser 3 is a popular choice for game developers for several reasons, I could use many lines to write about it, but I'll summarize it as follows:

• Ease of use: Phaser 3 is relatively easy to learn, especially for those already familiar with JavaScript. Guides and more guides available at https://phaser.io/learn
• Flexibility: It offers many ready-to-use features, but also allows customization and extension to meet the specific needs of your game.
• Active community: With a vibrant and active community, you'll always find support and resources to help you on your game development journey. You can find all communities at https://phaser.io/community

Getting Started

Setting up the workspace

Before you start, you'll need to set up your workspace through an external code editor, make sure you have Node.js installed on your computer. After that, open the terminal and follow these steps in the correct sequence.:

1. Create a new directory for your project, for example: my-hive.
2. Navigate to the project directory using the terminal.
3. Initialize a new Node.js project by running the command npm init -y.
4. Install Phaser 3 by running the command npm install phaser.

Creating your first game

Now that you have the environment set up, it's time to start coding or better, to have some headaches at the beginning. This is normal for first contact. Create a new JavaScript file inside the project folder, we can call it hivegame.js.

• Here's a basic example to get you started:

import Phaser from 'phaser';

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload,
        create
    }
};

const game = new Phaser.Game(config);

function preload() {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
}

function create() {
    this.add.image(400, 300, 'sky');
    this.add.image(400, 568, 'ground').setScale(2).refreshBody();
    this.add.image(600, 400, 'star');
}

The assets used were obtained from random images on the internet, you can use them in this way. Always remembering to save with the proper name and in the assets folder.

Understanding the code

• The preload function is used to load the resources needed for the game, such as images, audios, and spritesheets.
• The create function is called as soon as the resources are loaded and is where you set up the initial state of your game.

Testing your game

Now that you have your game code, let's test it through the terminal, remembering the need for you to have Node.js on your device.

node hivegame.js

If everything goes well following this tutorial, a browser window will open with your game being displayed (I don't think we can call that a game yet).

Next steps

This was just a small example to get you started as Phaser 3 offers many more features that you can explore to create amazing games. Here are some suggestions for your next steps:

• Try adding movement to the objects in your game.
• Explore animations and visual effects to make your game more dynamic.
• Add interactivity to allow players to control characters or interact with the environment.

You can find everything you need at https://phaser.io/learn . Below I will leave some important things for this step.

World Building
Ready Player One
Controlling the player with the keyboard

Conclusion

Following the tutorial and tips contained in this post, you've taken the first steps in creating 2D games with Phaser 3. I hope this basic guide has been helpful for you to get started. Keep exploring, practicing, and creating, the best you can do is to try everything, imagine that there are only limitations for 3D. That is, there is no true limit for it, but there are better frameworks designated for it.

If you have any questions or need help, you can leave them in the comments on this post.

Se você está animado para começar a criar seus próprios jogos em 2D, e tem acompanhado alguns dos meus posts anteriores, você deve continuar a leitura disso. Vou te guiar pelo básico do básico para você começar a usar o Phaser 3, uma ferramenta poderosa para criar jogos na linguagem JavaScript.

Gostaria de lembrar aos novos leitores, irá acontecer uma grande Game Jam promovida pela Gamedev.js, confira as informações sobre isso em: Gamedev.JS Jam 2024 is Coming in April [+PRIZES] - An Opportunity for Game Developers to Be Recognized (English/Português)

Introdução ao Phaser

O que é o Phaser 3?

Download: https://phaser.io/download
O Phaser 3 é um framework de código aberto para desenvolvimento de jogos em 2D usando JavaScript. Ele oferece uma gama impressionante de funcionalidades para criar jogos de todos os tipos e tamanhos, desde simples jogos de plataforma até aventuras complexas de RPG. No entanto em vez das conhecidas Game Engines que eu apresento aqui, ele não contém uma interface para executar sua codificação, em vez disso utilizamos editores para códigos de terceiros, como o Visual Studio Code.

Por que usar o Phaser 3?

Embora como mencionei no contexto acima sobre uma falta de interface para o mesmo, O Phaser 3 é uma escolha popular para desenvolvedores de jogos por várias razões, poderia utilizar muitas linhas para escrever sobre isso, mas irei resumir da seguinte forma:

• Facilidade de uso: O Phaser 3 é relativamente fácil de aprender, especialmente para quem já está familiarizado com JavaScript. Guias e mais guias disponíveis em https://phaser.io/learn
• Flexibilidade: Ele oferece muitos recursos prontos para uso, mas também permite personalização e extensão para atender às necessidades específicas do seu jogo.
• Comunidade ativa: Com uma comunidade vibrante e ativa, você sempre encontrará suporte e recursos para ajudá-lo em sua jornada de desenvolvimento de jogos. Você pode encontrar todas as comunidades em https://phaser.io/community

Começando isso

Configurando o ambiente de trabalho

Antes de começar, você precisará configurar seu ambiente de trabalho através de um editor de códigos externo, certifique-se de ter o Node.js instalado em seu computador. Depois disso, abra o terminal e siga estes passos na devida sequência.:

1. Crie um novo diretório para o seu projeto, por exemplo: my-hive.
2. Navegue até o diretório do projeto usando o terminal.
3. Inicialize um novo projeto Node.js executando o comando npm init -y.
4. Instale o Phaser 3 executando o comando npm install phaser.

Criando o seu primeiro jogo

Agora que você tem o ambiente configurado, é hora de começar a codificar ou melhor, ter algumas dores de cabeça de inicio. Isso é normal para primeiro contato. Crie um novo arquivo JavaScript dentro da pasta do seu projeto, podemos chamá-lo de hivegame.js.

• Aqui está um exemplo básico para você começar:

import Phaser from 'phaser';

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload,
        create
    }
};

const game = new Phaser.Game(config);

function preload() {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
}

function create() {
    this.add.image(400, 300, 'sky');
    this.add.image(400, 568, 'ground').setScale(2).refreshBody();
    this.add.image(600, 400, 'star');
}

Os assets utilizados foram obtidos de imagens aleatórias na internet, você pode utilizar dessa forma. Sempre lembrando de salvar com o devido nome e na pasta assets.

Entendendo o código

• A função preload é usada para carregar os recursos necessários para o jogo, como imagens, áudios e spritesheets.
• A função create é chamada assim que os recursos são carregados e é onde você configura o estado inicial do seu jogo.

Testando o seu jogo

Agora que você tem o código do seu jogo, vamos testá-lo através do terminal, lembrando a necessidade de você ter Node.js em seu dispositivo.

node hivegame.js

Se tudo correr bem seguindo esse tutorial, uma janela do navegador será aberta com o seu jogo sendo exibido (acho que não podemos chamar isso de jogo ainda).

Próximos passos

Este foi apenas um pequeno exemplo para te colocar no caminho certo já que o Phaser 3 oferece muito mais recursos que você pode explorar para criar jogos incríveis. Aqui estão algumas sugestões para os seus próximos passos:

• Experimente adicionar movimento aos objetos do seu jogo.
• Explore animações e efeitos visuais para tornar o seu jogo mais dinâmico.
• Adicione interatividade para permitir que os jogadores controlem personagens ou interajam com o ambiente.

Você pode encontrar tudo que precisa em https://phaser.io/learn . Abaixo irei deixar algumas coisas importantes para esse passo.

World Building
Ready Player One
Controlling the player with the keyboard

Conclusão

Seguindo o tutorial e dicas contidas nesse post, você deu os primeiros passos na criação de jogos em 2D com o Phaser 3. Espero que este guia básico tenha sido útil para você começar. Continue explorando, praticando e criando, o melhor que você pode fazer é tentar de tudo, imagine que a apenas limitações para o 3D. Isso é, não a um limite verdadeiro para isso, mas existe frameworks melhores designados para isso.

Se tiver dúvidas ou precisar de ajuda, você pode deixar no comentário dessa postagem.