[Youth Camp] – A front-end view of game development

Before we get down to business, let’s talk about what a game is

Games in the broad sense

• The broadest definition is organized play, usually for entertainment and sometimes for educational purposes. In English, a sports Game is also a Game, as long as the activity has a purpose, rules, challenges and interaction

• For example, basketball, as a sports activity, has certain rules and requires participants’ physical strength and strategic choice. Both sides have confrontation and interaction, and finally win to obtain psychological pleasure, so it can be defined as a game

Now let’s narrow it down a bit: video games

In games, players interact with electronic devices (computers, consoles, mobile phones, etc.)

Here are some examples:

Games in the narrow sense

Games in the narrow sense are video games made with a game engine

Classification of the game: according to the gameplay of the major categories, and then through the sub-category refinement

• Now games may overlap in multiple categories, but there will be one main TAB
• So what are the MOBA games that have been popular in the past few years?
• Multiplayer online tactical battle games, also known as real-time strategy games (RTS)

The difference between game development and traditional front-end development

Next, I will explain it from three aspects

1. Develop links and roles
2. Why use a game engine
3. Transition from front-end development to game development

Develop links and roles

The division of labor of game development teams: building a smallest but most complete game development team requires only three people: planning, programming, and art. Of course, if you’re good enough, you can work as an indie developer.

The basic link of game development

Graph LR initiation stage - - > creative -. - > market prototype stage - - > gameplay - - > development feasibility Alpha stage - - - > macro design. - > / character design - plot. - > sound/UI design -. - > experience design Beta -. - > Test -.-> Iteration operation phase

Why use a game engine

Game engine’s biggest game: rendering

• Engines are created when a company makes one game, reuses the code from the previous game for the next game, and then finds that the code is used in almost every game, and then pulls it out and becomes an engine.
• Can you do complex dynamic rendering and interaction without an engine? B: Sure. Is it convenient? Not necessarily.
• So a game engine is more like a solution that allows you to improve your development efficiency when making a certain type of product.

but

• React Native, Weex, and Cordova can also be ported to multiple platforms.
• Do physics effects MatterJS, ammo. Js and other physics engines can be used.
• Do animation CSS implementation is not impossible. Complex points? Encapsulate an animation library.

So why use a game engine?

• Because you want it to give you a complete implementation that you don’t have to put together, encapsulate, and make better results in less time, especially when it comes to rendering efficiency and performance optimization.
• It provides the usual features required for game development: the engine provides many components that shorten development time and make game development easier; Specialist engines generally perform better than home-grown engines.
• Game engines typically include renderers, 2D/3D graphics elements, collision detection, physics engines, sound, controller support, animation, and more.

Transition from front-end development to game development

There needs to be a clear understanding that front-end development and game development are not mutually exclusive.

At present, many H5 games and small games in the market are developed and produced at the front end of the Web, rather than by specialized game development teams and professional game development students. The reasons may lie in 1. 2. 2d game engines are low enough to get started (easy to get started) 3. The way the gameplay is implemented in Campaign H5 is fuzzy (development boundaries are blurred)

• Many of the major 2D game engines now support Javascript development and use the associated engineering capabilities, which is a sign of the move towards web front-end development.

• Therefore, a 2D game engine from the perspective of Web front-end development is nothing more than a set of frameworks, a set of solutions. But there is a difference in philosophy: game development is more about content.

Load a gameplay in a Web project

PixiJS

• At first glance, the website looks like a game engine, but it clearly states: “Create beautiful digital content with the fastest and most flexible 2D WebGL renderer” (Google). So it’s still essentially a rendering engine, and it claims to be the best at it.
• It doesn’t just make games, it can use this technology to create any kind of interactive content, like apps, and it can build its own game engine on top of it. (The rendering engine for AVG. Is and Phaser. Is is Pixi

Load the game

1. Install and import

2. Create Pixi applications and stages

// The first step is to create a display rectangle. Creating a Pixi application instance will automatically create a canvas and figure out how to display your image in the Canvas.
let app = new PIXI.Application(f width: 250.height:250 });
// App. stage is a stage that contains everything you want to display in Pixi

// Add canvas to the DOM Tree.
document.body.appendChild(app.view);
// Pixi. Applicatton calculates whether Canvas or WebGL should be used to render the image, depending on which browser is supported, WebGL is preferred.

// If you want Canvas to be transparent, or force Canvas mode to be used, you can set it
let app = new PIXI.Application({ 
width:250.height:250.transparent: true.forceCanvas:true,})Copy the code

3. Display an image

Start by understanding a concept :Sprite

• You may have heard of sprites/Sprites in CSS, but the concept of Sprite in Pixi and more game engines is an object that holds images, and you can control its size, position, and other properties to create interactive animations.
• Creating and controlling sprites is an important part of learning Pixi, and creating a Sprite requires understanding how images are loaded into the Pixi.

Here’s a concept: texture caching

• Pixi uses texture caching to store and reference textures needed by Sprite. The texture’s name string is the address of the image.
• Now that we have an “images/cat.png”, we can use pixlutils.texturecache [“images/cat.png”] to find it in the TextureCache.
• Before you use it, of course, you need to convert it into a texture and store it in the texture cache, which can be loaded using PIXIloader.

PIXI.loader.add("images/cat.png").load(res= > {
    let sprite = new PIXI.Sprite(
        PIXI.loader.resources["images/cat.png"].texture
        );
});
Copy the code

• Now that you’ve created a Sprite, the next step is to display it.
• We talked earlier about the concept of a stage, remember that the stage is the main container for all your sprites. (Important: You should not see any elves that have not been added to the stage)
• We have to add it to the dance in order to display the image.

And we can see that when we run the program

4. Make pictures move

You can set the location and size of the Sprite

sprite.width = 80;
sprte.height = 120;
sprite.position.set(10.10);
sprite.scale.set(2.2);
sprite.rotation = 0.5;
Copy the code

What if you want to move one pixel per frame? That’s where the game loop comes in. (Code for any game loop is called once per frame)

app.tiker.add(delta= >{
   sprite.x += 1;
});

Copy the code