最近在上手了skulpt开发之后想到其实可以往python的图形界面相关的库去发力，因为javascript在图形方面的生态还是蛮有优势的，而且图形界面给人的感觉更直观更容易表达，所以先从pythen比较流行的2d库入手，利用skulpt实现pygame-zero，底层执行的js代码由PIXI.js运行。

后续会研究物理引擎、3D方面的库来探索更多的功能。

本项目已经开源，想要了解源码的朋友请移步Github: skulpt_pygame_zero，以下是开发文档：

基于skulpt的第三方模块: skulpt_pygame_zero

这是一个基于skulpt实现在浏览器运行pygame-zero的模块，为skulpt拓展2d游戏的能力，底层运行基于PIXI.js实现。

安装

npm 引入:

1
npm install skulpt-pygame-zero

或者使用 cdn 引入:

1
https://cdn.jsdelivr.net/gh/lipten/skulpt-pygame-zero@master/dist/main.js

快速上手

  1. 导入模块
1
2
3
4
5
// webpack
import 'skulpt-pygame-zero'

// cdn
<script src="https://cdn.jsdelivr.net/gh/lipten/skulpt-pygame-zero@master/dist/main.js"></script>
  1. 在skulpt的read钩子函数中填入以下注释语句中的代码，用于解析python代码有import的时候拦截加载pygamezero的完整的库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function builtinRead(file) {
  console.log("Attempting file: " + Sk.ffi.remapToJs(file));

  // insert code start =========================================
  if (window.PyGameZero.matchModelName(file)) {
    return window.PyGameZero.load(file)
  }
  // insert code end ===========================================
  
  if (Sk.builtinFiles === undefined || Sk.builtinFiles.files[file] === undefined) {
    throw "File not found: '" + file + "'";
  }
  
  return Sk.builtinFiles.files[file];
}

Sk.configure({
  .... other settings
  read: builtinRead,
  __future__: Sk.python3,
});
  1. 传入渲染容器
    html
    1
    <div id="stage"></div>
    ​ javascript
    1
    PyGameZero.setContainer(document.getElementById('stage'))
    复制项目中的 test/simple.py 代码可用于测试

skulpt_pygame_zero与pythen的pygame-zero有哪些区别：

  1. 加载图片只能用外链资源

    1
    Actor('https://static.codeasily.net/blogs/pig1.png')

  2. 创建角色可以传入多个图片资源，然后通过frame属性控制使用第几张

    1
    2
    3
    4
    pig = Actor(('https://static.codeasily.net/blogs/pig1.png','https://static.codeasily.net/blogs/pig2.png'))

    # then ute frame=2 to switch the second photo
    pig.frame = 2

以下是未实现的Pygame-zero的api

  • images
  • music.fadeout
  • music.queue
  • Actor keyword argument: pos, topleft, topright, bottomleft, bottomright, midtop, midleft, midright, midbottom or center （Actor构造器不支持一些关键参数）
  • Anchor point （角色锚点）
  • Tone Generator （音调生成器）
  • WIDTH、HEIGHT （变量为只读，值为html容器的宽高）