Compile Apps with Pyjs and Pyjsdl

Pyjsdl implements Pygame through JavaScript functionality permitting porting Python/Pygame apps to the Web browser as JavaScript/HTML5 apps via Pyjs compilation. This post provides some additional details required to port the app, supplementing a previous post. The following app was deployed from Serpent Duel script, and runs with Python and Pygame, on JVM with Jython and PyJ2D, and in the Web browser with Pyjs compilation and Pyjsdl.

This JavaScript app was compiled with Pyjs and Pyjsdl:

Compilation of the script requires Pyjs installation, check the install instruction and guide.txt in Pyjsdl folder. Currently, the Pyjs Git build is necessary and uses pip to install. Installation of Pyjs was straightforward, only problem encountered on my Linux setup was that the –upgrade flag was necessary on the pip install command due to an issue with the Six library dependency probably due to an incompatible version. The Python script can be compiled with Pyjs using the command ‘[pyjs_path]/bin/pyjsbuild app.py –dynamic-link -o output’ with option flags listed using -h option. Pyjs compilation has the -S flag for strict mode to provide the closest compatibility to Python, but for enhanced performance at the expense of compatibility compilation can be done with the -O flag for optimise mode.

To compile, place Pyjsdl on the path of the app’s folder. The script needs some modifications prior to compilation. To use Pyjsdl, edit the script’s import statement as ‘import pyjsdl as pygame’ to replace Pygame. To run in the Web browser environment the app must conform to JavaScript constraints, in particular the app’s main while loop operation would block browser update, resolved by revising the main while loop into a function and passing it as a callback function to the browser to call in time-triggered manner with statement pyjsdl.display.setup(function). Loading of images cannot operate as defined by the image load method of Pygame since the JavaScript cannot wait for image retrieval as this would also block browser update, so the images are preloaded by passing an images list to the setup method as pyjsdl.display.setup(function, images), and the pyjsdl.image.load method then access the preloaded images. A difficulty experienced with the current process is that any image access prior to calling the setup method will cause issues, and can be handled by chaining sequential calls to the pyjsdl.display.setup method passing various functions. Other script modifications that may be required are to address additional JavaScript environment specifics such as wait routines, to conform to Pyjs close compatibility with Python2.7, and handle any Pygame methods not implemented in Pyjsdl API. These modifications should permit compilation with Pyjs in strict mode.

Compiling the script in Pyjs optimise mode will provide enhanced performance of a few folds, through lost of some Python compatibility that reduces the overhead of handling Python functionality not present in JavaScript. Most noticeable is lost of access to object’s virtual attributes. For Pygame apps this is apparent with the Rect object that can be accessed through numerous virtual attributes, which is implemented in Pyjsdl and operates with Pyjs compilation in strict mode but lost in optimise mode, and JavaScript annoyingly registers such attribute access as undefined rather than raise an exception error. To overcome this problem such as Rect.center = (x_pos,y_pos) is to modify these statements to use the intrinsic Rect attributes (x, y, width, height) or call the object’s special methods directly such as Rect.__setattr__(‘center’, (x_pos,y_pos)). Developing a conversion script to do such changes to possibly automate some of the modifications necessary, warning the pattern-matching algorithm may have inaccuracies and requires manual verification before the change is permitted; for usage run script with -h option. There should be few such modifications necessary dependent on the app’s code. These modifications should permit compilation with Pyjs in optimise mode.

Pyjs compiles to an output folder, to which you should transfer any necessary resources such as image folder. The JavaScript can be tested in the Web browser from the local HTML file by opening the main HTML file in Firefox or Chrome (launch Chrome with –allow-file-access-from-files option to run local files). The JavaScript app can then be deployed on the Web page, for decreased load times the size of JavaScript app can be reduced with Closure Compiler. Further development is being directed to enhance the performance of Pyjsdl, such as use of object pools to minimize creation of new objects and code optimization to harness JavaScript JIT compiler. For further information on the use of Pyjsdl, check Pyjsdl resources page. If there is any issues regarding use of the module, suggestions for improvements, or to share links to information/tutorial/demo, send a message through comments, direct messaging, or via Github.

Updated 2021/04/29 – revised Serpent Duel script.