Introduction: Integrating game thinking and game mechanics in a non-game environment to guide user interaction and use

The author of this article: Amoy front-end team -Eva.js author – Ming Fei

background

Now more and more companies and apps have begun to use gamification to make products. Gamification refers to the integration of game thinking and game mechanism in a non-game environment to guide user interaction and use.

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

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

What can do

Let’s take a look at some 2D interactive projects. At present, most interactions are presented in the form of games, and users can have a better interactive experience through the gameplay and exquisite effects of the games. We can achieve better business effects through the forms of cultivation, collection, tower defense, doll catching and other similar games combined with business attributes.

Based on learning

Common 2D interaction skills

First of all, let’s take a look at the common abilities used in 2D interactive games. The first part is front-end knowledge, which mainly includes rendering tools required for rendering, game loops, 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, a lot of math-related knowledge will be involved, such as making objects in the game simulate real physical effects, or using game AI for robots in man-machine war in some games. In this paper, we will not explain too much mathematical 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, The rendering engine renders the corresponding content to the canvas based on the data content.

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

cycle

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

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

Each redraw the browser does is called 1 frame, and the browser’s default redraw rate is 60 frames, which means that normally the browser will refresh 60 times a second.

By using the following method, 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)Copy the code

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

Normally, we put this method at the top of the function, because if an error occurs during the calculation and drawing of the data, the program will not execute this method and the game will stop.

The canvas

In HTML, we generally use canvas tag to draw images, which has no drawing capability. 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, while WebGL can draw 2D and 3D images with higher performance.

Canvas provides some basic apis, but elements in interactive games are complex, so there are usually rendering engines and game engines to handle these elements.

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

Based rendering

Next, I’ll talk about how there are several rendering schemes that we often use in 2D gamified interactive games.

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

Images and text, not to mention, are the most commonly used in view development. Let’s start with the graph

graphics

Generally in the development will often use some simple graphics, images will not only be used in direct display of the content, but also used in the rendering of the content mask, such as a picture only shows the content of the graph, will also be used in the button area judgment, physical engine collision shape and so on.

The elves

Sprite map is also the Sprite map we contact in CSS, which is to synthesize multiple images in a large picture and render a certain position when using it. Through the way of Sprite map, we can improve the network loading efficiency and rendering efficiency. General Sprite resources are composed of two files, one is a picture file, the other is a location information file. In general, when rendering with an engine, you only need to care about the name of the corresponding small graph.

Scratchable latex

We often encounter some images whose size is not fixed, but the surrounding or quadruple style is not deformed, that is, the.9 image, such as message bubble, if the width and height are directly set, the whole bubble image will be pulled out of shape.

Use the principle of nine grids to solve:

Rendering engines generally provide a convenient way to do this.

mask

A mask is used to mask the rendered content, much like setting overflow: Hidden to 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 when the animation starts.

If an object is moving uniformly to the right, we can use the formula s = v times t

In general, we use a ready-made animation library, such as tween.js, but we can also use tools like Lottie to implement complex animation logic, which requires hand-written animation.

Frame by frame animation

Skeletal animation

Bone animation can simulate some complicated animation with certain joint logic. Compared with frame animation, it uses fewer pictures and occupies less memory.

Bone animation is mainly composed of the following parts:

Bone animation map

Bone design and animation

Texture + Skeleton + animation

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

The project of actual combat

Knowing the above content, we can develop interactive projects. If you want to do a good job, you must first improve its tools. Here we recommend eva.js, which is open source by tao Technology Department, which is designed specifically for the front-end developers to develop gamification interactive projects. At present, many products such as Taobao, Tmall, Alipay, Youku, Ali Mom, AliExpress, Lazada, Kaola and so on are in use. The 2020 Double 11 Cat Raising project is also implemented 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, and an alert pops up when clicked.

The game of Eva.js is composed of game objects and components. The game object represents an object in the game, and the components represent the abilities of the object. In this case, there is only one object, and its abilities are three:

  • Display as a picture of a heart
  • There’s a left and right transition animation
  • Click on the event

Now that we’ve analyzed the capabilities needed for this Demo, we’re going to go through the four steps of eva.js development

Step1 add resources & create a 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()
  ],
});
Copy the code

AddResource is passed into a resource, which does not have to have only image resources, but also frame animation, skeleton animation and so on. Here is an example of image resources. More demos can be found on eva.js.

After adding resources, we also created a game instance, which is the main runtime to run the game. Because eva.js has only one core game runtime, we have to install all functions by ourselves.

  • RendererSystem is the system used to render the game. All rendering capabilities depend on this system, which sets the width and height and the canvas object to render.
  • ImgSystem is a system for drawing pictures
  • EventSystem is the system used to trigger click events
  • TransitionSystem is the system used to animate displacement
Step2 create an object and set 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,
  },
});
Copy the code

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

Step3 add the required components

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

All we need right now are image rendering, click events, and displacement animation, so we need to add three components

Image rendering

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

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

We call the addComponent method of heart to add a component. Here we add the Img component. The Img component has a resource parameter that corresponds to the name of the image resource added in Step1. Of course, Sprite pictures and bone animations are also based on the same principle. Resources need to be added in resource to be 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)
})
Copy the code

Add an Event component to the gameobject and bind the TAP Event to the on method. The second parameter of ON is the function triggered by the TAP Event. Of course, the Event component has other events, which can be viewed in the eva.js document.

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)
Copy the code

We created a group of animations called idle. Inside the group, we changed the position.x property of the heart.transform component from 0->1000ms to 400 ms, 1000ms to 2000ms. Start with 400->0, and then use the Transition play method to make the animation Infinity times.

Step4 run

Most games run automatically, so once you’ve done that, the game will run automatically.

conclusion

In the future, there will be more and more gamified products, and the development of interactive games will become the necessary skills of front-end engineers. Through this article, we can learn some basic gamified interactive technologies, and also learn how to implement a simple interactive game through EVa.js.

If we want to have a deeper understanding of gamification and interactive technology, we need to learn game engine, rendering principle, animation, physics, sound and other technologies in depth. For interactive business development, EVa.js can meet most of the needs at present.

In the field of front-end gamification, the direction of gamification has just started. Eva.js is a game engine focusing on the development of gamification projects, which is also in the beginning state. In the future, EVa.JS will continue to focus on the front-end and gamification projects to make the development of gamification projects easier. We also hope that you can participate in the construction of the front-end gamification field, and we will continue to share relevant technologies and output gamification project development capabilities.

The original link

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