The author of this article: Tao department front-end team – EVa.js author – Ming Fei

CodeDay#7 Beijing station registration ing, welcome to click free registration.

background

Now more and more companies and apps start to use gamification to make products. The so-called gamification refers to the integration and application of game thinking and game mechanics in non-game environment to guide user interaction and use.

The 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, JD.com’s Dongdong Orchard, Pinduoduo’s Duoduo orchard, Meituan’s Xiaomei orchard… Gamification is one of the best ways to improve retention.

In this article, we will list some of the games of gamification interaction, and then break down a case study to learn some of the basics of 2D interaction, so that you can quickly start writing interactive games.

What can do

Let’s take a look at several 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

Common ability of 2D interaction

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

Then there are the basic drawing and animation capabilities, which are some of the basic game elements mentioned earlier. In game development, a lot of mathematics-related knowledge will be involved, such as making the objects in the game simulate the real physical effect, or using game AI to realize the robot in man-machine battle in some games. In this paper, we will not explain too much about mathematics-related 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 runs dynamically, in order to achieve some animation/real physics effects, we use animation, AI, physics engine and other tools to control the changes in the data, and then loop to continuously modify the data and render to the canvas to make the game run.

cycle

Now that we know how to loop to make a game work, 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. This method is typically used to update the animation.

Each time the browser redraws is called 1 frame. The default browser redraws is 60 frames, which means that the browser normally refreshes 60 times per second.

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

Const loop = () => {requestAnimationFrame(loop) // Calculate data // draw graphics} requestAnimationFrame(loop)Copy the code

Because the requestAnimationFrame method is only called before the next drawing, we need to call the requestAnimationFrame method once each time we call the method to keep the game running, so we call it repeatedly within the loop method.

Normally, we would put this method first, because if an error is reported in the process of calculating the data or drawing the graph, the program will not execute this method and the game will stop.

The canvas

In HTML, we usually use canvas tag to draw images, which has no drawing ability. We use getContext to get the drawing context, and call the method above the context to draw.

Common 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 the elements in interactive games are more complex, so there is usually a rendering engine and a game engine to take care of those elements.

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

Based rendering

I’ll go over 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, needless to say, are the most commonly used in view development. Let’s start with the graph

graphics

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 shows only the content within the graphics, but also to judge button areas, shape of physics engine collisions, and so on.

The elves

Sprite diagram is also the Sprite diagram that we contact in CSS, which is to combine multiple images in a large image and render a certain position when using. Through the Sprite diagram, we can improve the network loading efficiency and rendering efficiency. General Sprite resources are composed of two files, one is an image file, the other is a location information file. Generally, when using an engine for rendering, you only need to care about the name of the corresponding small image.

Scratchable latex

We often come across images that are not fixed in size, but do not deform around or four times, i.e..9 images, such as message bubbles. If you set the width and height directly, the whole bubble image will be deformed.

Use the principle of sudoku to solve:

The general rendering engine will also provide a convenient way to implement.

mask

Using a mask, you can render the content in a mask, much like setting overflow:hidden to the div

Based on the animation

Transition animations

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

If a body moves uniformly to the right, we can use the formula S = v times t

In general, we use a ready-made animation library, like the Tween.js implementation, but there are also tools that can be used to implement complex animation logic, like Lottie, which requires hand-written animation.

Frame by frame animation

Skeletal animation

Bone animation can simulate some more complex animation with a certain joint logic, compared to frame animation, the use of fewer pictures, less memory.

Bone animation mainly consists 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 is 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

To understand the above content, we can develop interactive projects, to do good, must first its tools, here we recommend the tao department of open source technology eva.js, it is specially designed for front-end developers to provide the development of gamification interactive projects. At present, many products such as Taobao, Tmall, Alipay, Youku, Alima, AliExpress, Lazada and Koala are in use. The project of raising a cat on Double 11 in 2020 is also realized with EVa.js.

Next, 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 clicking on it will pop up an alert.

Eva.js games are made up of game objects and components. The game object represents an object in the game, and the component represents the object’s abilities. In this case, there is only one object, and its abilities are three:

  • Display as a picture of a heart

  • There is a left and right transition animation

  • Click on the event

We have just analyzed the capabilities needed for this Demo, and now we are going to do the four steps of eva.js to develop the game

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()
  ],
});
Copy the code

AddResource is passed into a resource inside, here does not have to only picture resources, but also frame animation, skeleton animation and other resources, here to picture resources for example. You can visit the eva.js official website to view more demos.

After adding resources, we also created a game instance, which is the main runtime to run the game, because eva.js only has a core game runtime, so we have to install all the features, so we need to install the system for the game, pictures, events, animation.

  • RendererSystem is the system used to render the game. All rendering capabilities depend on this system, which sets the width, height and 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 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,
  },
});
Copy the code

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

Step3 add the required components

We just added the system needed to implement the video function in the new Game. These systems are designed to read the values on the components and implement the functions. Therefore, we need to add components to the objects before we can make the objects implement the corresponding functions.

All we need now are image rendering, click events, and displacement animations, so we’re going to add three components

Image rendering

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

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

The Img component has a resource parameter. This parameter is the name of the image resource, which actually corresponds to the name of the image resource added in Step1. Of course, Sprite diagram, bone animation is the same principle, need to add resources in the resource, when adding components to use.

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 game object and bind the tap Event with the on method. The second parameter of on is the function that the tap Event triggers. Of course, there are other events in the Event component, which can be seen 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)
Copy the code

In this code, we create an animation group called idle. In the current animation group, we change the position.x property of the heart.transform component from 0-> 400ms, 1000ms->2000ms, Start from 400->0, and then use the Transition component’s play method to have the animation execute Infinity times.

Step4 run

Games are usually auto-run, so when you’ve done this, the game will start automatically.

conclusion

In the future, there will be more and more gamified products, and developing interactive games will become a necessary skill for front-end engineers. Through this article, we can learn some basic gamified interactive technologies, and also learn how to achieve a simplest interactive game through eva.js.

If we want to further develop gamification and interactive technology, we need to further study game engine, rendering principle, animation, physics, sound and other technologies. For interactive business development, EVa.js can currently meet most of the needs.

The gamification direction in the front end field has just started. Eva.js, a game engine focused on the development of gamification projects, is also in its infancy. 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 development of front-end gamification, and we will continue to share relevant technologies and output gamification project development capabilities.

CodeDay#7 sign up for ing at Beijing station

On July 17, he met with the mobile development industry technology leaders in Zhongguancun to explore the cutting-edge mobile terminal dynamic cross-terminal development scheme.

CodeDay#7 Beijing station registration ing, welcome to click free registration.