Web-based content has been providing a way to access all sorts of entertainment, and being able to game on the web is the next step. While flash games existed in the past, browsers didn't have the kind of power to run full games. But now they do, and browsers have been able to directly use the available hardware to speed up rendering for some time now. ZephyrJS is an expansion of the fastest, most flexible 2D WebGL renderer PixiJS, letting anybody have access to a blazing fast renderer with standard game engine features that developers have come to rely on.
PixiJS on its own is very powerful, but a lot of work is needed to make it work for web-based interactive content, specifically games. Other alternatives typically wrap the PixiJS functions, making it tough to translate what you've become accustomed to back to Pixi, or learn how to use it in the first place. Zephyr directly ADDS to PixiJS instead of wrapping it, letting you use the full functionality of Pixi and use their provided documentation, supplemented by ours. By doing this, it allows for developers to know they will always have plenty of documentation and examples to learn from.
And ZephyrJS is quick to setup and use. After following PixiJS's standard setup instructions, it only takes adding one line of code to add Zephyr. No more installing packages, no more trying to figure out which plugins you need, just add Zephyr and you're ready to go. Simply call Zephyr's methods in your javascript to add webgl audio, mouse and keyboard control, and file io, and every piece you need is at your fingertips.
The PixiJS Getting Started guide is very good, there's really nothing to expand upon in it.
When you are loading PixiJS, you have a couple options. Following the instructions on the linked page, is reliable, but for speed (and to be considerate to their servers), link our hosted, minified versions or download it. Immediately after the PixiJS script tag, include a script tag linking your downloaded zephyr.js file, or our hosted one. Example code is below:
<head>
<script src="https://zephyrjs.netlify.app/stable/pixi.js"></script>
<script src="https://zephyrjs.netlify.app/stable/zephyr.js"></script>
</head>
If you'd like to test out the nightly version, awesome! Thanks for helping out with development, and issue reports are super helpful. Just
replace where it says stable
above with nightly
and you're good to go!
When you're wanting to use one of Zephyr's features, you can call the Zephyr.use______() methods. The options are listed at the top of the documentation. After that, you're ready to go! Feel free to download the quickstart bundle if you'd like!
If you'd like to help out, there's a few ways that you can!
- Bug Reports/Feature Requests
- If you'd like to directly influence where I'll be focusing my efforts, submit an issue on Github! It'll get added to the project board, and you can track the progress there!
- Usage Poll
- For broader information, you can fill out the usage poll. It just has some general questions about PixiJS and should only take a couple minutes to fill out, but it is very useful.
- Contribute Directly
- Code is always welcome, just I'd appreciate some communication beforehand, or VERY well documented code.
- I'm also looking for someone who is experienced with creating/maintaining NPM packages to extend Zephyr's reach!