Jump to content

Pixi.js Showcase


Mat Groves
 Share

Recommended Posts

https://github.com/themoonrat/webgl-benchmark

Lets you compare different scene setups in different versions of pixi and phaser :)

Useful to compare different engine performance. To compare different version performance. And to compare different scene setup performance.

Ie. compare the speed for 'Multiple Textures' for Pixi v3 vs v4. Multi texturing was added for v4, so you'll see a large speed increase. Likewise compare 'Graphics: Complex' from v4 to v5 (dev is best); a lot of work into batching Graphics shows clear performance benefits.

But then on the same hand on a modern Pixi version and test 'Sprites: Multiple Textures' vs 'SpriteSheet', and you'll see speed improvements on devices with less than 16 texture units; showing benefit of keeping sprites onto a single texture.

Any requests, please raise issues :)

 

 

 

 

Link to comment
Share on other sites

@themoonrat it is pretty much expected Pixi to be a lot faster than Phaser2 and taking advantage over Phaser3 when it comes to sprite+graphics batching. But I'm seeing a huge slowdown with BitmapText rendering, while Phaser3 is rock solid at 60fps.

10000 instances, Pixi 3.0.11 - ~58FPS, 4.0.3 - ~43fps, 4.8.5 - ~40fps, 5.0.0-alpha.3 ~38fps

Why is that? Is it caused by trade-off between raw performance and more complex batching (closer thing to real life usage) in v5?

Link to comment
Share on other sites

  • 5 weeks later...

I was in need of some testing tools while trying some things on different mobile devices and with my need to display some things easy on the display without the need to always connect it with dev tools I created https://github.com/jkanchelov/pixi-console

It gives you a PIXI.container which is attached to console.log/warn/error and will display the logs in the canvas. It may be useful for someone. There are a lot of refactoring things and improvements to be done, but in this state is working fine for what I needed it. 

Hope it helps someone   

Link to comment
Share on other sites

9 minutes ago, jkanchelov said:

I was in need of some testing tools while trying some things on different mobile devices and with my need to display some things easy on the display without the need to always connect it with dev tools I created https://github.com/jkanchelov/pixi-console

It gives you a PIXI.container which is attached to console.log/warn/error and will display the logs in the canvas. It may be useful for someone. There are a lot of refactoring things and improvements to be done, but in this state is working fine for what I needed it. 

Hope it helps someone   

Good job! We'll add it to https://github.com/cursedcoder/awesome-pixijs and wiki

If you use slack, I can send you an invite to pixijs community slack.

If you use telegram and know russian - there are two russian gamedev html5 chats.

Link to comment
Share on other sites

1 hour ago, ivan.popelyshev said:

Good job! We'll add it to https://github.com/cursedcoder/awesome-pixijs and wiki

If you use slack, I can send you an invite to pixijs community slack.

If you use telegram and know russian - there are two russian gamedev html5 chats.

It would be an honor to be added there.
 
I would like the invite to the pixi.js slack too :)) 

Link to comment
Share on other sites

  • 7 months later...
Hi everyone,
 
I just create a simple show case for PIXI.JS.
 
A top-down Tank game with: 
 
1. Physic engine integration with matter-js.
2. ViewPort for 2D camara.
3. Custom Tile map and grid system. 
4. Dynamic generate new area .
5. Keyboard Control.
6. GUI Interface.
 
 
Link to comment
Share on other sites

  • 4 weeks later...
  • 5 weeks later...
  • 1 month later...

I have a lengthy post in the showcase forum for those interested - we are in beta for our game GORILLA TOWN which uses PIXI, and pixi-spine. Props to Ivan P from PIXI.js for helping us on this forum multiple times!

If you want to learn more about the game, we have a fancy marketing site:

http://gorilla.town

and, if you want to download and play the beta for windows (runs in electron), you can check it out here:

http://gorilla.town/beta.html

We love to hear any feedback you have.

 

Thanks!

Sean

Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...
29 minutes ago, yulijun said:

the tutorial is here https://github.com/proudcat/pixi-webpack-demo , welcome to star.

Added. https://github.com/pixijs/pixi.js/wiki/v5-Resources#tutorials

If you want invite to pixijs slack, or if you want to know discord server where some of pixijs devs are hanging , just tell me in private message  :)

Edited by ivan.popelyshev
Link to comment
Share on other sites

2 hours ago, ivan.popelyshev said:

Added. https://github.com/pixijs/pixi.js/wiki/v5-Resources#tutorials

If you want invite to pixijs slack, or if you want to know discord server where some of pixijs devs are hanging , just tell me in private message  :)

i think it can be good also in boilerplate, it a good starter and the only one without typescript!

Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...

Two of my games were made with Pixi.JS.

Zapper.io
This is a snake style MMO that I released about 2 days ago.
It features procedurally generated creatures and uses various filters to visually enhance the creatures.
You can find it at http://zapper.io
zapper-screen.png.a7c22ba4c83f1b5915a5ddc8daa02baf.png


Ninja.io
This is a multiplayer shooter with 3 game modes(currently), lots of weapons and many different worlds.
This project has been online for a while but I still consider it to be an alpha version.
Play at https://ninja.io
ninja.io-screen.png.2130cbfd4e0905a973e3a032ded88d28.png

Ninja.io world editor
The world editor for Ninja.io is also made with Pixi.JS.
It has lots of features and I've used it to create all the ninja.io worlds.
I plan to release a more user friendly version to the ninja.io community at some point.
ninja-editor.jpg.6c5a6ddd5fa63d5d1f01229a7be062b1.jpg

The most challenging thing was to get acceptable performance for Ninja.io.
I eventually found a way to efficiently combine mesh triangles in the world editor.
Due to limitations of the editor, earlier versions of Ninja.io rendered every mesh triangle as a separate mesh, but this incurred an unacceptable performance hit.
There is probably still plenty of room for optimization here but I just haven't really delved into the depths of the Pixi renderer code yet.

Thanks a lot for making it publicly available, and I hope to be able to contribute at some point!

Edited by Buizerd
Link to comment
Share on other sites

Hey guys, I wanted to share a python package I have been working on that has a visual interface builded with Pixi, I want to thank all of you, the documentation + reading questions on this forum helped me work out the javascript part (the worst part of my code as I am bit unexperienced with that side; learned a lot though)

I attach a video of the visualization (it does support zooming etc thanks to the lovely Pixi-viewport plugin), it has real time texture creation to visualise images that are created on python side and shared through sockets.

Most of the content is generated dynamically based on the data from python (the blocks on the right are python classes / functions)

https://www.youtube.com/watch?v=wBKMTYBR0iE

A preview:

919476732_Screenshot2020-04-03at19_02_05.thumb.png.0b98d839d1fe211d7771f98b6b4d80cb.png

You can find the whole project at https://github.com/JunkyByte/vispipe

Link to comment
Share on other sites

8 minutes ago, Junkybyte said:

Hey guys, I wanted to share a python package I have been working on that has a visual interface builded with Pixi, I want to thank all of you,

YEAH, now I can refere to that repo all people who asked about python+pixi combo. Maybe I'll move one python console game to pixi thanks to you :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...