After I started skulpt development recently, I thought that I could actually make efforts in python’s library related to the graphical interface. Because javascript has advantages in the ecological aspect of graphics, and the graphical interface is more intuitive and easier to express, SO I started with the popular 2D library of Pythen. Skulpt is used to implement Pygame-Zero, and the js code executed at the bottom is run by pixi.js.

There is also experimental physicis-engine functionality (branch: Physicis-Engine)

Demo portal: Python-IDE

You can modify the code as you like in the demo, click the blue Run button to see the effect, and see other examples in the upper left corner

Github: Skulpt_PYGame_zero: SkulpT_PYGame_zero: Skulpt_PYGame_zero

Skulpt-based third party module: Skulpt_pygame_zero

This is a module that runs PyGame-Zero in the browser based on Skulpt implementation to expand SKULpt’s 2D game capabilities. The underlying implementation is based on Pixi.js.

The installation

NPM introduction:

npm install skulpt-pygame-zero
Copy the code

Or use CDN to introduce:

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

Quick learning

  1. The import module
// webpack
import 'skulpt-pygame-zero'

// cdn
<script src="https://cdn.jsdelivr.net/gh/lipten/skulpt-pygame-zero@master/dist/main.js"></script>
Copy the code
  1. usePyGameZero.usePyGameZeroThe read hook function that wraps skulpt
Sk.configure({
  .... other settings
  // before
  read: builtinRead,
  // after 
  read: PyGameZero.usePyGameZero(builtinRead),
  __future__: Sk.python3,
});
Copy the code
  1. Passing in the render container

html

<div id="stage"></div>
Copy the code

​ javascript

PyGameZero.setContainer(document.getElementById('stage'))
Copy the code

  1. It is best to execute pyGameZer.reset () once before skulpt is run

    // insert before running
PyGameZero.reset();
// running skulpt
Sk.misceval.asyncToPromise(function() {
	return Sk.importMainWithBody("<stdin>".false, pythonCode, true);
});
Copy the code

The test/simple.py code in the copy project is available for testing

Skulpt_pygame_zero differs from Pygame-zero in pythen:

  1. Loading images can only be done with external links

    Actor('https://static.lipten.link/blogs/pig1.png')
Copy the code

  2. Creating a role can pass in multiple image resources and control how many images are used through the frame property

    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
Copy the code

The following is the unimplemented PYGame-Zero API

  • images
  • music.fadeout
  • music.queue
  • Actor keyword argument: Pos, topleft, topright, bottomLeft, bottomRight, midTop, MIDLeft, midRight, midbottom or Center
  • Anchor Point
  • Tone Generator
  • WIDTH, HEIGHT (variable is read-only, value is the WIDTH and HEIGHT of the HTML container)