Tiny.js

基本概念

在入门篇中，我们知道 app.run(..); 可以启动应用，那么它的原理是什么？ 实际上，run 方法调用了 app.replaceScene(..)，它们的入参的基类都是 Tiny.DisplayObject，就是说，任何通过基类为 Tiny.DisplayObject 实例化的对象都可以直接（或间接）显示出来。 关于显示对象，它们的继承关系如下：

          +---------------+
          | DisplayObject |
          +-------+-------+
                  |
          +-------v-------+
          |   Container   +-------------------+------------------+
          +--+----+----+--+                   |                  |
             |    |    |                      |                  |
    +--------v-+  |  +-v----------+ +---------v---------+ +------v-------+
    | Graphics |  |  | BitmapText | | ParticleContainer | | TilingSprite |
    +----------+  |  +------------+ +-------------------+ +--------------+
                  |
          +-------v-------+
          |    Sprite     |
          +--+---------+--+
             |         |
+------------v---+ +---v---+
| AnimatedSprite | | Text  |
+----------------+ +-------+

其中 BitmapText、ParticleContainer、TilingSprite 都是插件提供的，故使用请安装对应的插件。

这样，我们可以认为，只要是继承自 DisplayObject 的类实例化后的对象都可以被 Application 使用。

var app = new Tiny.Application();

// Container
app.run(new Tiny.Container());

// Sprite
app.replaceScene(Tiny.Sprite.fromImage('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/logo.png'));

// Text
app.replaceScene(new Tiny.Text('abc'));

// Graphics
var g = new Tiny.Graphics();
g.lineStyle(0);
g.beginFill(0xFFFFFF);
g.drawCircle(100, 100, 60);
g.endFill();
app.replaceScene(g);

// AnimatedSprite
app.replaceScene(Tiny.AnimatedSprite.fromImages([
  'https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/hao/hao0.png',
  'https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/hao/hao1.png',
  'https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/hao/hao2.png',
  'https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/hao/hao3.png',
]));

// TilingSprite
app.replaceScene(new Tiny.tiling.TilingSprite(Tiny.Texture.fromImage('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/tile.png'), 200, 200));

← 容器 →