《Cocos 游戏开发入门》2.2 精灵、纹理与图集切分

// 1) 三参：整张图，按原始尺寸画到 (dx, dy)
ctx.drawImage(image, dx, dy);

// 2) 五参：整张图，缩放到 dw × dh
ctx.drawImage(image, dx, dy, dw, dh);

// 3) 九参：从源图切一块，缩放到目标矩形
ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

export function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`加载失败: ${src}`));
    img.src = src;
  });
}

{
  "image": "blocks.png",
  "frames": [
    { "name": "player_idle", "x": 0, "y": 0, "w": 64, "h": 64 },
    { "name": "player_run", "x": 64, "y": 0, "w": 64, "h": 64 },
    { "name": "coin", "x": 128, "y": 0, "w": 32, "h": 32 },
    { "name": "brick", "x": 160, "y": 0, "w": 32, "h": 32 }
  ]
}

// src/render/atlas.ts
export interface AtlasFrame {
  name: string;
  x: number;
  y: number;
  w: number;
  h: number;
}

export interface AtlasData {
  image: string;
  frames: AtlasFrame[];
}

export function indexFrames(data: AtlasData): Map<string, AtlasFrame> {
  const map = new Map<string, AtlasFrame>();
  for (const frame of data.frames) {
    map.set(frame.name, frame);
  }
  return map;
}

// src/render/sprite.ts
import { Mat2D } from '../math/mat2d';

export class Sprite {
  image: CanvasImageSource;
  sx: number;
  sy: number;
  sw: number;
  sh: number;
  pivotX = 0.5;
  pivotY = 0.5;

  constructor(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number) {
    this.image = image;
    this.sx = sx;
    this.sy = sy;
    this.sw = sw;
    this.sh = sh;
  }

  draw(ctx: CanvasRenderingContext2D, m: Mat2D, scaleX = 1, scaleY = 1): void {
    ctx.setTransform(m.a, m.b, m.c, m.d, m.tx, m.ty);
    const ox = -this.sw * this.pivotX * scaleX;
    const oy = -this.sh * this.pivotY * scaleY;
    ctx.drawImage(
      this.image,
      this.sx, this.sy, this.sw, this.sh,
      ox, oy, this.sw * scaleX, this.sh * scaleY,
    );
  }
}

// src/render/nine-slice.ts
export interface Insets {
  left: number;
  right: number;
  top: number;
  bottom: number;
}

export function drawNineSlice(
  ctx: CanvasRenderingContext2D,
  image: CanvasImageSource,
  sx: number, sy: number, sw: number, sh: number,
  insets: Insets,
  dx: number, dy: number, dw: number, dh: number,
): void {
  const { left, right, top, bottom } = insets;
  const cw = sw - left - right;   // 源中心宽
  const ch = sh - top - bottom;   // 源中心高
  const cdx = dw - left - right;  // 目标中心宽
  const cdy = dh - top - bottom;  // 目标中心高

  // 左上角（不拉伸）
  ctx.drawImage(image, sx, sy, left, top, dx, dy, left, top);
  // 顶边（横向拉伸）
  ctx.drawImage(image, sx + left, sy, cw, top, dx + left, dy, cdx, top);
  // 右上角
  ctx.drawImage(image, sx + sw - right, sy, right, top, dx + dw - right, dy, right, top);
  // 左中、中心、右中、底边、四角同理，共九次 drawImage
}

// src/scene/sprite-node.ts
import { Mat2D } from '../math/mat2d';
import { Sprite } from '../render/sprite';

export class SpriteNode {
  x = 0;
  y = 0;
  angle = 0;
  scale = 1;
  sprite: Sprite;
  private readonly matrix = new Mat2D();

  constructor(sprite: Sprite) {
    this.sprite = sprite;
  }

  render(ctx: CanvasRenderingContext2D): void {
    this.matrix
      .identity()
      .translate(this.x, this.y)
      .rotate(this.angle)
      .scale(this.scale, this.scale);
    this.sprite.draw(ctx, this.matrix, this.scale, this.scale);
  }
}

// assets/scripts/CoinView.ts
import { _decorator, Component, Sprite, SpriteFrame, SpriteAtlas, UITransform } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CoinView')
export class CoinView extends Component {
  @property(SpriteFrame)
  idleFrame: SpriteFrame | null = null;

  @property(SpriteAtlas)
  uiAtlas: SpriteAtlas | null = null;

  start() {
    const sprite = this.getComponent(Sprite);
    if (!sprite) return;

    sprite.spriteFrame = this.uiAtlas
      ? this.uiAtlas.getSpriteFrame('coin')
      : this.idleFrame;

    if (sprite.spriteFrame) {
      sprite.spriteFrame.insetLeft = 8;
      sprite.spriteFrame.insetRight = 8;
      sprite.spriteFrame.insetTop = 8;
      sprite.spriteFrame.insetBottom = 8;
    }
    sprite.type = Sprite.Type.SLICED;

    const ui = this.getComponent(UITransform);
    if (ui) {
      ui.setAnchorPoint(0.5, 0.5);
      ui.setContentSize(48, 48);
    }
  }
}