入门篇-SuperPowers

首先我们可以去官网下载 http://superpowers-html5.com/index.en.html，或者使用nodejs工具下载 git clone https://github.com/superpowers/superpowers-core superpowers/core 

然后我们打开引擎，设置用户名和密码，开启服务器，就可以打开工程，我们新建一个工程名字为Storage Demo，单击新建资源sprite

然后加载一个水母图片，

然后在单击新建资源菜单，单击建立一个脚本，命名为game。然后写代码

class CharacterBehavior extends Sup.Behavior {
  speed = 0.1;

//控制角色的移动
  update() {
    if (Sup.Input.isKeyDown("A")) this.actor.moveX(-this.speed);
    if (Sup.Input.isKeyDown("D")) this.actor.moveX(this.speed);
    if (Sup.Input.isKeyDown("W")) this.actor.moveY(this.speed);
    if (Sup.Input.isKeyDown("S")) this.actor.moveY(-this.speed);
    
    if (Sup.Input.isKeyDown("ESCAPE")) this.actor.setPosition(0, 0, 0);
  }
}

//注册角色的行为
Sup.registerBehavior(CharacterBehavior);




// 设置角色和相机
let actor = new Sup.Actor("Character");
new Sup.SpriteRenderer(actor, Sup.get("Sprite", Sup.Sprite));
actor.addBehavior(CharacterBehavior);

//新建一个相机
let cameraActor = new Sup.Actor("Camera");
new Sup.Camera(cameraActor);
cameraActor.setLocalPosition(0, 0, 10);




// 当退出的时候保存角色的位置
Sup.Input.on("exit", () => {
  Sup.Storage.setJSON("myCharacterPosition", { x: actor.getX(), y: actor.getY() });
});




// 重新加载并保存角色的位置
let savedPosition = Sup.Storage.getJSON("myCharacterPosition", { x: 0, y: 0 });
actor.setPosition(savedPosition.x, savedPosition.y, 0);

然后就可以在浏览器上运行了，运行的效果