Flutter 插件malison使用_用于网页游戏中的 ASCII 图形

Flutter 插件malison使用_用于网页游戏中的 ASCII 图形

介绍

Malison 是一个小型的 Dart 库，用于在浏览器中绘制旧式的 ASCII 终端。它最初是从 roguelike 游戏 Hauberk 中提取出来的，主要用于网页游戏中的 ASCII 图形。你可以把它想象成适用于网页的 curses 库。

使用方法

添加依赖

首先，在你的 pubspec.yaml 文件中添加 Malison 作为依赖：

dependencies:
  malison: any

引入库并使用

接下来，在你的 Dart 代码中引入 Malison 库，并创建一个终端实例进行绘图：

import 'dart:html';

import 'package:malison/malison.dart';

void main() {
  // 创建或查询一个 <canvas> 元素并绑定到它。
  var canvas = CanvasElement();
  document.body.children.add(canvas);

  // 创建一个新的终端。CanvasTerminal 使用浏览器的字体，
  // RetroTerminal 使用内置的 DOS 风格的 Code Page 437 字体。
  var terminal = RetroTerminal.dos(80, 40, canvas);

  // 你可以在指定位置绘制字符串。
  terminal.writeAt(0, 0, "This is a terminal!");

  // 你可以控制前景色和背景色。
  terminal.writeAt(0, 1, "This is blue on green", Color.blue, Color.green);

  // 你也可以绘制单个字符（glyph）——字符+颜色单元。
  terminal.drawGlyph(3, 4, Glyph.fromCharCode(CharCode.blackHeartSuit, Color.red, Color.white));

  // 当你完成绘制后，告诉终端渲染所有的更改。它会批量渲染以提高性能。
  terminal.render();
}

完整示例 Demo

以下是一个更复杂的示例，展示了如何使用 Malison 创建一个简单的动画界面，用户可以通过按键切换不同的终端样式、调整帧率等。

import 'dart:html' as html;
import 'dart:math' as math;

import 'package:malison/malison.dart';
import 'package:malison/malison_web.dart';

const width = 80;
const height = 30;

final ui = UserInterface<String>();

/// 提供几种不同的终端选择。
final terminals = <RenderableTerminal Function()>[
  () => RetroTerminal.dos(width, height),
  () => RetroTerminal.shortDos(width, height),
  () => CanvasTerminal(width, height, Font('Menlo, Consolas', size: 12, w: 8, h: 14, x: 1, y: 11)),
  () => CanvasTerminal(width, height, Font('Courier', size: 13, w: 10, h: 15, x: 1, y: 11)),
  () => CanvasTerminal(width, height, Font('Courier', size: 12, w: 8, h: 14, x: 1, y: 10))
];

/// 当前终端的索引。
int terminalIndex = 0;

void main() {
  // 设置键绑定。
  ui.keyPress.bind("next terminal", KeyCode.tab);
  ui.keyPress.bind("prev terminal", KeyCode.tab, shift: true);
  ui.keyPress.bind("animate", KeyCode.space);
  ui.keyPress.bind("profile", KeyCode.p);
  ui.keyPress.bind("fps up", KeyCode.up);
  ui.keyPress.bind("fps down", KeyCode.down);

  updateTerminal();

  ui.push(MainScreen());

  ui.handlingInput = true;
  ui.running = true;
}

void updateTerminal() {
  html.document.body!.children.clear();
  ui.setTerminal(terminals[terminalIndex]());
}

class MainScreen extends Screen<String> {
  final List<Ball> balls = [];

  MainScreen() {
    var colors = [
      Color.red,
      Color.orange,
      Color.gold,
      Color.yellow,
      Color.green,
      Color.aqua,
      Color.blue,
      Color.purple
    ];

    var random = math.Random();

    for (var char in "0123456789".codeUnits) {
      for (var color in colors) {
        balls.add(Ball(
            color,
            char,
            random.nextDouble() * Ball.pitWidth,
            random.nextDouble() * (Ball.pitHeight / 2.0),
            random.nextDouble() + 0.2,
            0.0));
      }
    }
  }

  [@override](/user/override)
  bool handleInput(String input) {
    switch (input) {
      case "next terminal":
        terminalIndex = (terminalIndex + 1) % terminals.length;
        updateTerminal();
        ui.refresh();

      case "prev terminal":
        terminalIndex = (terminalIndex - 1) % terminals.length;
        updateTerminal();
        ui.refresh();

      case "animate":
        ui.running = !ui.running;

      case "profile":
        profile();

      case "fps up":
        ui.framesPerSecond++;

      case "fps down":
        ui.framesPerSecond--;

      default:
        return false;
    }

    return true;
  }

  void profile() {
    ui.running = true;
    for (var i = 0; i < 1000; i++) {
      update();
      ui.refresh();
    }
  }

  [@override](/user/override)
  void update() {
    for (var ball in balls) {
      ball.update();
    }

    dirty();
  }

  [@override](/user/override)
  void render(Terminal terminal) {
    terminal.clear();

    void colorBar(int y, String name, Color light, Color medium, Color dark) {
      terminal.writeAt(2, y, name, Color.gray);
      terminal.writeAt(10, y, "light", light);
      terminal.writeAt(16, y, "medium", medium);
      terminal.writeAt(23, y, "dark", dark);

      terminal.writeAt(28, y, " light ", Color.black, light);
      terminal.writeAt(35, y, " medium ", Color.black, medium);
      terminal.writeAt(43, y, " dark ", Color.black, dark);
    }

    terminal.writeAt(0, 0, "Predefined colors:");
    terminal.writeAt(59, 0, "switch terminal [tab]", Color.darkGray);
    terminal.writeAt(75, 0, "[tab]", Color.lightGray);
    colorBar(1, "gray", Color.lightGray, Color.gray, Color.darkGray);
    colorBar(2, "red", Color.lightRed, Color.red, Color.darkRed);
    colorBar(3, "orange", Color.lightOrange, Color.orange, Color.darkOrange);
    colorBar(4, "gold", Color.lightGold, Color.gold, Color.darkGold);
    colorBar(5, "yellow", Color.lightYellow, Color.yellow, Color.darkYellow);
    colorBar(6, "green", Color.lightGreen, Color.green, Color.darkGreen);
    colorBar(7, "aqua", Color.lightAqua, Color.aqua, Color.darkAqua);
    colorBar(8, "blue", Color.lightBlue, Color.blue, Color.darkBlue);
    colorBar(9, "purple", Color.lightPurple, Color.purple, Color.darkPurple);
    colorBar(10, "brown", Color.lightBrown, Color.brown, Color.darkBrown);

    terminal.writeAt(0, 12, "Code page 437:");
    var lines = [
      " ☺☻♥♦♣♠•◘○⚗♂♀♪♫☼",
      "►◄↕‼¶§▬↨↑↓→←∟↔▲▼",
      " !\"#\$%&'()*+,-./",
      "0123456789:;<=>?",
      "@ABCDEFGHIJKLMNO",
      "PQRSTUVWXYZ[\\]^_",
      "`abcdefghijklmno",
      "pqrstuvwxyz{|}~⌂",
      "ÇüéâäàåçêëèïîìÄÅ",
      "ÉæÆôöòûùÿÖÜ¢£¥₧ƒ",
      "áíóúñѪº¿⌐¬½¼¡«»",
      "░▒▓│┤╡╢╖╕╣║╗╝╜╛┐",
      "└┴┬├─┼╞╟╚╔╩╦╠═╬╧",
      "╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀",
      "αßΓπΣσµτΦΘΩδ∞φε∩",
      "≡±≥≤⌠⌡÷≈°∙·√ⁿ²■"
    ];

    var y = 13;
    for (var line in lines) {
      terminal.writeAt(3, y++, line, Color.lightGray);
    }

    terminal.writeAt(22, 12, "Simple game loop:");
    terminal.writeAt(50, 12, "FPS:");
    terminal.writeAt(55, 12, ui.framesPerSecond.toString());
    terminal.writeAt(66, 12, "toggle [space]", Color.darkGray);
    terminal.writeAt(73, 12, "[space]", Color.lightGray);

    for (var ball in balls) {
      ball.render(terminal);
    }
  }
}

class Ball {
  static const pitWidth = 56.0;
  static const pitHeight = 17.0;

  final Color color;
  final int charCode;

  double x, y, h, v;

  Ball(this.color, this.charCode, this.x, this.y, this.h, this.v);

  void update() {
    x += h;
    if (x < 0.0) {
      x = -x;
      h = -h;
    } else if (x > pitWidth) {
      x = pitWidth - x + pitWidth;
      h = -h;
    }

    v += 0.03;
    y += v;
    if (y > pitHeight) {
      y = pitHeight - y + pitHeight;
      v = -v;
    }
  }

  void render(Terminal terminal) {
    terminal.drawChar(24 + x.toInt(), 13 + y.toInt(), charCode, color);
  }
}