Boost Game Development with EVA’s 2.5D Framework: A Gold Coin Town Case Study

Overview of the EVA System in Gold Coin Town

The Gold Coin Town was recently redesigned, introducing richer visual styles and new gameplay. The EVA system, built from years of interactive development experience, offers fast onboarding, high development efficiency, and comprehensive capabilities, dramatically improving development speed as demonstrated by the rapid rollout of the new town.

2.5D Isometric Game Design

The game area uses a 2D Isometric (commonly called 2.5D) scheme to create a 3D‑like effect in a 2D game. Visual assets follow a strict design specification, and developers place and stitch these assets to build scenes.

The map uses a Tiled Map (tile‑based) approach where each tile forms the base for asset placement.

Game Layer Architecture

The project separates the game into three layers:

Background layer : renders static background images.

Scene layer : handles building placement and rendering via the game engine.

Hud layer : displays business logic using traditional DOM and CSS, allowing rapid UI updates.

Development Workflow

Assets are uploaded, previewed, and exported through EVA Store. The exported resources are assembled in the EVA editor to generate scene data, which EVAJS renders. The UI layer is built with DOM + CSS.

Rendering Dragonbone Animation (Code Example)

import { Game, GameObject, resource, RESOURCE_TYPE } from '@ali/eva.js';
import { RendererSystem } from '@ali/eva-plugin-renderer';
import { DragonBone, DragonBoneSystem } from '@ali/eva-plugin-renderer-dragonbone';

const game = new Game({
  systems: [
    new RendererSystem({
      canvas: document.getElementById('canvas'),
      width: 324,
      height: 240,
      transparent: true,
    }),
    // System: DragonBone
    new DragonBoneSystem()
  ],
});

const dragonbone = new GameObject('dragonbone', {
  position: { x: 162, y: 240 }
});

const dragonboneCom = new DragonBone({
  resource: 'dragonbone',
  armatureName: 'B-1-9-3-2x2'
});

const animation = dragonbone.addComponent(dragonboneCom);
animation.play('newAnimation');

Asset Management with EVA Store

EVA Store supports numerous asset formats (images, models, animations, audio/video) and provides optimization algorithms such as sprite‑sheet compression, DragonBone vertex optimization, and minimal‑memory sprite atlases. It also offers instant preview for designers and project‑based permission control for collaborative work.

Scene Construction and JSON Map Format

The team built a simple editor (EVA Design) to import EVA Store assets, overlay visual mockups, and export scene data in a custom 2.5D JSON format.

{
  "mapConfig": {"width":30,"height":30,"tileWidth":108,"tileHeight":54},
  "layers":[{
    "layerName":"buildings",
    "align":[-0.5,-1],
    "data":[[0,0,...],[0,0,...]],
    "objects":[{}, {"resourceKey":"building1"}],
    "resources":{
      "building1":{
        "name":"building1",
        "type":"DRAGONBONE",
        "src":{
          "image":{"type":"png","url":"https://gw.alicdn.com/...png"},
          "tex":{"type":"json","url":"https://pages.tmall.com/...json"},
          "ske":{"type":"json","url":"https://pages.tmall.com/...json"}
        }
      }
    }
  }]
}

Pathfinding and Walkable Map

Using the 2D matrix, depth ordering is handled automatically. A walkable map is generated where 0 denotes traversable tiles and 1 denotes obstacles, enabling A* pathfinding for character movement.

// 0: walkable, 1: obstacle
const walkable = [
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,1,0,0,1,1,0,0,0],
  // ... more rows ...
];

Component and System Implementation

The IsoSprite component calculates isometric positions and depth, while the TileSystem observes component changes to add, update, or remove tiles.

class IsoSprite extends Component {
  static componentName = 'IsoSprite';
  _depth = 0;
  init(params) {
    const { x, y, tileWidth, tileHeight } = params;
    this.isoX = (x - y) * tileWidth / 2;
    this.isoY = (x + y) * tileHeight / 2;
    this._depth = 10 * (x + y);
    this.addComponents();
  }
  addComponents() {
    this.gameObject.addComponent(new Render({ zIndex: this._depth }));
    this.gameObject.transform.position = { x: this.isoX, y: this.isoY };
  }
}

@decorators.componentObserver({
  IsoSprite: ['_depth'],
  Render: ['zIndex']
})
class TileSystem extends System {
  static systemName = 'TileSystem';
  init(params) { this.placeTile(); }
  placeTile(layer, mapConfig) { /* iterate data and create components */ }
  update() { /* handle ADD, CHANGE, REMOVE */ }
}

HUD Layer and Web Accessibility

The HUD layer uses ARIA attributes to make interactive elements screen‑reader friendly. Buttons have role="button", tooltips use role="alert", and state is conveyed via aria‑expanded. Hidden text is provided with the .sr‑only class.

SVG Tooltip Component

A reusable SvgToolTip component embeds ARIA properties and renders tooltip shapes with SVG, ensuring consistent accessibility across the game.

<SvgToolTip
  className="tooltip__growth-wrap"
  a11yId="a11y__lock"
  a11yRole="tooltip"
  visible={true}
  trigger="none"
  content={growthContent}
  closeOutSide={false}
  onVisibleChange={v => onToolTipVisibleChange(v, config.petName)}
>
  <div className="tooltip-anchor" role="button" tabIndex={-1}>
    <span className="sr-only">{skin.name}</span>
  </div>
</SvgToolTip>

Additional Techniques and Dynamic Popup Solution

SVG is used for irregular tooltip shapes. For dynamic H5 popups on iOS, the team adopted EVA Ware, a DSL‑driven popup manager that renders popups client‑side, reducing package size and handling large‑scale promotional activities.

Conclusion

The EVA system enables anyone to develop interactive projects quickly, with a focus on 2.5D rendering, asset management, accessibility, and collaborative workflows, embodying the goal of “everyone can develop, interaction everywhere.”