Master 2D Gamified Interactions with Eva.js: From Basics to Real Projects

More and more companies and apps are adopting gamification—integrating game thinking and mechanics into non‑game environments to boost user interaction, retention, and activity. Examples include Ant Farm, Ant Forest, Taobao's Farm, JD's Orchard, Pinduoduo's Orchard, and Meitu's Garden.

What Can Be Done

Interactive projects often use game‑style mechanics such as nurturing, collection, tower‑defense, and claw‑machine games to achieve better business outcomes.

Interactive Case

We examine several 2D interactive projects that typically combine background images, skeletal animations (e.g., a cat), progress bars built from rounded rectangles with transition animations, frame animations, sprites, and event handling.

Case Analysis

In a typical interactive scene you will find a background image, a cat animation implemented with bone animation, a money‑bag progress bar using two rounded rectangles whose width changes via transition animation, as well as frame animation, sprite sheets, and event capabilities.

Basic Learning

The front‑end knowledge required includes rendering tools, a game loop, and resource loading. Basic drawing and animation abilities are also essential. While game development often involves mathematics for physics or AI, this article focuses on the practical implementation rather than the math.

How Interactive Games Run

Interactive games follow a data‑driven model: game data (size, position, image source, etc.) is fed to a rendering engine, which draws the scene on a canvas. Animation, AI, and physics engines modify the data each frame, and the loop continuously updates and renders the canvas.

Loop

The browser provides requestAnimationFrame, which calls a callback before the next repaint, typically at 60 fps. This ensures data calculations and rendering happen each frame.

const loop = () => {
  requestAnimationFrame(loop)
  // calculate data
  // draw graphics
}
requestAnimationFrame(loop)

Canvas

In HTML we use the <canvas> element, obtain its drawing context with getContext, and draw via Canvas API (2D) or WebGL (higher performance, supports 2D and 3D). Complex interactive elements usually rely on a rendering or game engine.

Basic Rendering

Image

Text

Graphics

Sprite

Nine‑patch

Mask

Graphics

Simple shapes are often used for image masking, button hit‑testing, and physics collision shapes.

Sprite

Sprite sheets combine multiple images into one large image; rendering a specific region improves network and rendering efficiency. A sprite resource consists of the image file and a position data file.

Nine‑Patch

Used for scalable UI elements (e.g., chat bubbles) where corners remain unchanged while the center stretches.

Mask

Masking can achieve effects similar to overflow:hidden on a div.

Basic Animation

Transition Animation

Example: moving an object from 100 px to 500 px over 3 seconds.

Uniform motion uses the formula s = v * t.

Libraries like Tween.js or Lottie can simplify animation implementation.

Frame Animation

Sequential single‑frame images are played in order; for performance they are often packed into a sprite sheet using tools like Texture Packer.

Skeletal Animation

Skeletal animation combines a texture, bone hierarchy, and animation data, reducing memory usage compared to frame animation. Common tools include Spine and DragonBones.

Project Practice

Eva.js is an open‑source engine designed for front‑end developers to create gamified interactive projects. It is used by many Alibaba products such as Taobao, Tmall, Alipay, Youku, and more.

The following demo shows a heart image moving left‑right with an alert on click.

Step 1: Add Resources & Create 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(),
  ],
})

Step 2: Create Object & Set Position

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 },
})

Step 3: Add Required Components

Image Rendering

import { Img } from '@eva/plugin-renderer-img'
heart.addComponent(new Img({ resource: 'imageName' }))

Click Event

import { Event } from '@eva/plugin-renderer-event'
const evt = heart.addComponent(new Event())
evt.on('tap', () => { alert(1) })

Movement 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)

Step 4: Run

After completing the above steps, the game starts automatically.

Conclusion

Gamified products will continue to grow, and front‑end engineers need solid interactive‑game skills. This article covered basic gamification techniques and demonstrated how Eva.js can quickly create a simple interactive game. For deeper mastery, explore game engines, rendering principles, physics, and audio.