阅读 40

skulpt_pygame_zero——在浏览器运行pygame-zero

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

另外还有实验性的物理引擎功能呢(分支:physicis-engine)

demo传送门:python-ide

demo里可以随意修改代码,点击蓝色运行按钮即可看效果,左上角可以查看其他示例

image.png

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

基于skulpt的第三方模块: skulpt_pygame_zero

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

安装

npm 引入:

npm install skulpt-pygame-zero
复制代码

或者使用 cdn 引入:

https://cdn.jsdelivr.net/gh/lipten/skulpt-pygame-zero@master/dist/main.js
复制代码

快速上手

  1. 导入模块
// webpack
import 'skulpt-pygame-zero'

// cdn
<script src="https://cdn.jsdelivr.net/gh/lipten/skulpt-pygame-zero@master/dist/main.js"></script>
复制代码
  1. 使用 PyGameZero.usePyGameZero 包裹skulpt的read钩子函数
Sk.configure({
  .... other settings
  // before
  read: builtinRead,
  // after 
  read: PyGameZero.usePyGameZero(builtinRead),
  __future__: Sk.python3,
});
复制代码
  1. 传入渲染容器

html

<div id="stage"></div>
复制代码

​ javascript

PyGameZero.setContainer(document.getElementById('stage'))
复制代码
  1. 最好在运行skulpt之前执行一次PyGameZero.reset()

    // insert before running
    PyGameZero.reset();
    // running skulpt
    Sk.misceval.asyncToPromise(function() {
    	return Sk.importMainWithBody("<stdin>", false, pythonCode, true);
    });
    复制代码

复制项目中的 test/simple.py 代码可用于测试


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

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

    Actor('https://static.lipten.link/blogs/pig1.png')
    复制代码
  2. 创建角色可以传入多个图片资源,然后通过frame属性控制使用第几张

    pig = Actor(('https://static.lipten.link/blogs/pig1.png','https://static.lipten.link/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容器的宽高)
文章分类
前端
文章标签