All the front-ends need to look at the basics of 2D gamified interaction

Introduction: The thinking of the game and the mechanism of the game are integrated and applied in the non-game environment to guide the user interaction and use

background

Now more and more companies and apps begin to use gamification to make products. The so-called gamification refers to the method of integrating game thinking and game mechanics in non-game environment to guide users to interact and use.

Ant Manor and Ant Forest in Alipay achieve user retention and activity through the combination of games and public welfare. Taobao and Alipay’s Baba Farm, Jingdong’s Dongdong Orchard, Pinduoduo’s Duoduo Orchard, Meituan’s Xiaomei Orchard… There is no solution that is not gamification to improve retention.

In this article, we will list some gamified interactive games, and then break down a case to take you to learn some basic knowledge of 2D interaction, so that you can quickly play handwritten interactive games.

What can do

Let’s take a look at a few 2D interactive projects. At present, most of the interactions are presented in the form of games. Through the game play and exquisite effects, users can have a better interactive experience.

Based on learning

2D interactive common ability

First, let’s take a look at some of the common capabilities used in 2D interactive games. The first part is the front-end knowledge, which mainly includes the drawing tools required for rendering, the game loop, and the ability to load resources.

Then there are the basic drawing and animation abilities, which are some of the basics of the game mentioned earlier. In game development, there will be a lot of math-related knowledge involved, such as making the objects in the game simulate the real physical effect, or the robot in man-machine battle in some games, which is realized by using the game AI. In this paper, I will not explain too much math knowledge.

How do interactive games work

How do interactive games work?

First of all, we know that many current front-end project is driven by data view, the game also is such, for example, we have a plane to the game, so, we need to define the size of the aircraft, and his place in the game, and his corresponding plane pictures, these belong to the game data, we will be the data submitted to the rendering engine, Based on these data contents, the rendering engine renders the corresponding content onto the canvas.

The game is run dynamically, in order to achieve some animation/real physics effects, we use animation, AI, physics engine and other tools to control the change of the data, and then through the loop to continuously modify the data, and render to the canvas to achieve the game run.

cycle

We know that the game works through loops, so let’s take a look at how a game loop works in a front-end browser environment.

The browser provides the requestAnimationFrame method, which requires the browser to call the specified callback function before the next drawing, which is typically used to update the animation.

Each time the browser redraws, we call it 1 frame. The default rate for the browser to draw is 60 frames, which means that, normally, the browser will refresh 60 times a second.

With the following methods, we can ensure that before each frame is rendered, we can calculate the data and call the render method:

Const loop = () => {requestAnimationFrame(loop)} requestAnimationFrame(loop)

Because the requestAnimationFrame method is only called before the next drawing, we need to call this method every time we call it to keep the game running, so we call this method repeatedly in the Loop method.

Normally, we put this method at the top of the function, because if we report an error during the computation or drawing process, the program will not be able to execute this method and the game will stop.

The canvas

In HTML, we generally use Canvas tag to draw images, which itself has no drawing ability. We use GetContext to get the drawing context and call the method above the context to draw.

Commonly used drawing contexts include CanvasAPI and WebGL. Generally, CanvasAPI is used to draw 2D images. WebGL can draw 2D and 3D images, which has higher performance.

Canvas provides some basic APIs, but the elements in interactive games are complex, so there is usually a rendering engine and a game engine to carry these elements.

This article will not explain Canvas in detail, you can learn from MDN and other platforms.

I’m going to talk about a couple of rendering schemes that are commonly used in 2D gamified interactive games.

• The picture
• The text
• graphics
• The elves
• Scratchable latex
• mask

Images and text, of course, are the most commonly used in view development. Let’s start with the graph

graphics

Some simple graphics are often used in development. Images are used not only to show the content directly, but also to mask the rendered content. For example, an image only shows the content of the graphic, but also to judge the button area, the shape of the physical engine collision, and so on.

The elves

Sprite map is also our contact in CSS Sprite map, is a number of pictures combined in a large picture, in use when rendering one of the location, through the way of Sprite map, we can improve the network loading efficiency and rendering efficiency. The general Sprite resource is composed of two files, one is the image file, the other is the location information file. Usually when you use the engine for rendering, you only need to care about the name of the corresponding small image.

We often encounter some pictures whose size is not fixed, but whose surrounding or four times style does not deform, that is.9 picture. For example, message bubble, if the width and height are set directly, the whole bubble picture will be pulled and deformed.

Use the principle of the nine grids to solve:

General rendering engines will also provide a convenient way to implement.

mask

It renders the content as a mask, much like setting overflow:hidden for a div

Based on the animation

Transition animations

For example, an object moves from 100px to 500px in 3 seconds. We can calculate it in the following way. StartTime is the time the animation starts.

If an object is moving to the right at a constant speed, we can use the formula S = V times T

In general, we use an existing animation library, such as the Tween.js implementation, but we can also use some tools to implement complex animation logic, such as Lottie, where we still need hand-written animation.

Frame by frame animation

Skeletal animation

Bone animation can simulate some more complex animations with certain joint logic. Compared with frame animation, it uses fewer pictures and takes up less memory.

The skeleton animation consists of the following parts:

Skeleton animation map

Bone design and animation

Texture + skeleton + animation

Therefore, skeleton animation resources are generally composed of three files. The commonly used bone animation design software are Spine and Dragonbones, which are usually designed by designers or animation designers. Developers only need to use the resources exported by the software.

The project of actual combat

Understanding the above content, we can develop interactive projects, work to do a good job, must first benefit its device, here we recommend the open source EVA.js by Amoy Department of Technology, it is designed specifically for front-end developers to provide development of gamification interactive projects. At present, Taobao, Tmall, Alipay, Youku, AliMama, AliExpress, Lazada, Koala and many other products are in use. The 2020 Double 11 Cat Raise Project is also realized by using EVA.js.

Let’s take a simple Demo to learn how to use EVA.js.

This is an animation of a heart moving left and right. Click it and an alert pops up.

The game of Eva.js is composed of GameObject and Component. The GameObject represents an object in the game, while the Component represents the ability of the object. In this case, there is only one object with three abilities:

• Display as a picture of a heart
• There is a transition animation around
• Click on the event

We have just analyzed the capabilities required for this Demo, and now we are going to do the four steps of developing the game for EVA.js

Step1 Add resources & create the game

import { resource, Game } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'
import { ImgSystem } from '@eva/plugin-renderer-img'
import { EventSystem } from '@eva/plugin-renderer-event'
import { TransitionSystem } from '@eva/plugin-transition'

resource.addResource([
  {
    name: 'imageName',
    type: RESOURCE_TYPE.IMAGE,
    src: {
      image: {
        type: 'png',
        url:
          '//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png',
      },
    },
    preload: true,
  },
]);

const game = new Game({
  systems: [
    new RendererSystem({
      canvas: document.querySelector('#canvas'),
      width: 750,
      height: 1000,
    }),
    new ImgSystem(),
    new EventSystem(),
    new TransitionSystem()
  ],
});

AddResource is passed into a resource. It doesn’t have to be just an image resource. It can also be a frame animation, a skeleton animation, and so on. More demos can be viewed in the official website of EVA.js.

After adding resources, we also created a game instance, which is the main runtime to run the game. Since EVA.js only has a core game runtime, all of our functions need to be installed by ourselves ~ so we need to install the system needed for the game, such as pictures, events and animations.

• RendererSystem is the system used to render the game. All rendering capabilities are dependent on this system, which sets the width, height and canvas object to be rendered.
• IMGSystem is a system for drawing pictures
• EventSystem is the system used to trigger click events
• TransitionSystem is the system used to animate shifts

Step2 Create the object and set the location

import { GameObject } from '@eva/eva.js'

const heart = new GameObject('heart', {
  size: { width: 200, height: 200 },
  position: {
    x: 0,
    y: 0,
  },
  origin: { x: 0, y: 0 },
  anchor: {
    x: 0,
    y: 0,
  },
});

The first argument to this GameObject is the name of the object. The second argument is the location of the object. Size sets the size of the object, position sets the position, and more

Step3 Add the required components

Just now, we added the system needed to realize the video function in the new Game. These systems are to read the values on the component and then realize the function. Therefore, we need to add components to the object before we can make the object realize the corresponding function.

All we need so far are image rendering, click events, and displacement animation, so we’ll add three components

Image rendering

import { Img } from '@eva/plugin-renderer-img'

heart.addComponent(
  new Img({
    resource: 'imageName',
  }),
);

Call the AddComponent method of Heart to add the component. Here we add the Img component. The Img component has a resource parameter, which is the name of the image resource, which corresponds to the name of the image resource added in Step1. Of course, the same principle applies to Sprite map and skeleton animation. Resources need to be added in Resource and used when adding components.

Click on the event

import { Event } from '@eva/plugin-renderer-event'

const evt = heart.addComponent(new Event())
evt.on('tap', () => {
  alert(1)
})

Add an Event component to the GameObject and bind the tap Event with the on method. The second parameter of the on is the function triggered by the tap Event. Of course, the Event component has other events, which we can look at in the eva.js documentation.

Displacement of the animation

import { Transition } from '@eva/plugin-transition'

const transition = heart.addComponent(new Transition())
transition.group = {
  idle: [
    {
      name: 'position.x',
      component: heart.transform,
      values: [
        {
          time: 0,
          value: 0,
          tween: 'ease',
        },
        {
          time: 1000,
          value: 400,
          tween: 'ease',
        },
        {
          time: 2000,
          value: 0
        }
      ]
    }
  ]
}
transition.play('idle', Infinity)

In the Idle current animation group, we change the value of the position.x property of the heart.transform component from 0->1000ms to 0->400, 1000ms->2000ms, and 0-> 2000ms. From 400 to BBB 00, and then using the play method in the Transition component, let the animation run Infinity times.

Step4 run

Usually the game runs automatically, so after you finish the above work, the game will start automatically.

conclusion

In the future, there will be more and more gamification products, and the development of interactive games will become a necessary skill for front-end engineers. Through this article, we can learn some basic gamification interactive technology, and also learn how to implement a most simple interactive game through Eva.js.

If we want to have a deeper understanding of gamification and interactive technology, we need to further study game engine, rendering principle, animation, physics, sound effect and other technologies. For interactive business development, EVA.js can meet most demands at present.

In the front-end field, gamification has just started. Eva.js, as a game engine focusing on developing gamification projects, is also in its infancy. In the future, Eva.js will continue to focus on front-end and gamification projects to make the development of gamification projects simpler. We also hope that you can participate in the construction of front-end gamification field, and we will continue to share relevant technologies and export the ability of gamification project development.

This article is the original content of Aliyun, shall not be reproduced without permission.