Mat Groves

Pixi.js Showcase

Recommended Posts

I've been working on an ES6 pixi.js CLI tool. I looked at the current CLI tool and though it could use some improvement. So I created my own based on the `ember cli` tool. I also added support for plugins that are part of the default template. I will probably expand and document those later on. But for now here's my first go at it.

 

https://github.com/guatedude2/pixijs-cli

 

I'll will also be available in NPM soon. 

Share this post


Link to post
Share on other sites

Hi and this is my first JavaScript game / use of the canvas.

 

I've tried to code it in Pseudo classical pattern to maximize code reuse and make it run as well as possible.

I am sure I have made some mistakes throughout but am happy with the result and have learnt so much. I'm very grateful of PIXI and am starting to love it, already begun my next project!

 

http://www.d-juice.co.uk/websites/dumb_and_dumber_to/

 - I built this with assets from work and everything on the link is copyrighted to Universal Studios.

 

Thanks  :D

 

 

Share this post


Link to post
Share on other sites

Hi all - I'm new to Pixi.js but having a blast with it so far.  :D

 

Anyway, as an experiment, I modified this Pixi.js sample - http://gametest.mobi/pixi/morph/

 

The following changes were made to the original code:

 

1) Changed the sprite

2) Added sprite scaling based on the sprite z co-ords for more realism

3) Used the painter's algorithm for hidden surface removal

 

Here it is on codepen:

 

http://codepen.io/Fl35h/pen/GJZWeb

Share this post


Link to post
Share on other sites

This one barely scratches the surface of what you can do with Pixi.js, but I thought I would show it since it's a little different. This is a spatial data visualization built upon Pixi using a leaflet map in the background. Dot density maps are used to represent spatial data and the dots seamlessly transform into chart representations using the power of Pixi.

 

The key here was getting all the sprites to render and animate smoothly. I was able to achieve this using a ParticleContainer and switching different containers on/off in order to switch between scenes.

 

There seems to be a bug in Chrome that will result in occasional stickiness. The frame-rate remains high and Chrome's own profiling tools show no issue, however the screen doesn't update for a second. Firefox and IE 11 run this as smooth as butter so I don't think there is a Pixi.js issue.

 

http://map.imagine.sasaki.com/

 

Thanks for your continued hard work on Pixi.js

Share this post


Link to post
Share on other sites

Hi Pixi team, I just wanted to say thanks for the fantastic effort behind the latest Pixi.js version. I recently upgraded from 1.6.2 to 3.0.7 and everything is running smoothly. Thanks also for xerver's help on the forums while I was upgrading.

 

I've also just released my game on Kongregate. Feel free to check it out if you play on Kongregate, and I'd appreciate any support :)

 

http://www.kongregate.com/games/HemingwayGames/postbug

 

postbug_bees.png

Share this post


Link to post
Share on other sites

ARCATRIS²

'Tetris on Steroids'

post-16137-0-32894500-1442143764.jpg

 

post-16137-0-00248700-1442143793.jpg

 

post-16137-0-64992900-1442143795.jpg

 

post-16137-0-06324600-1442143798.jpg

 

post-16137-0-45569500-1442143800.jpg

 

post-16137-0-96212400-1442143802.jpg

 

ARCATRIS² is a fast-paced, colorful Tetris-like game that features a hot soundtrack and gorgeous visual effects -the perfect casual game to spend your excess time with :) It's actually my first Pixi game ever (although I've been creating games for many years). I just wanted to give it a try -and immediately liked it (besides the frustrating lag of documentation).

 

I think the game is quite addictive and entertaining. You can try to compete with the top 100 players (the list is quite empty yet, so it should be easy to gain a nice ranking) :) I even added a feature to record and replay games (which is used to provide the "demo mode" in the game), but I decided not to make the game record mode available to the player because it has a disadvantage: key repeat can't be used while recording (only single key presses), which is a show-stopper if you want to enjoy fast-paced gameplay. Therefore it is used to record the demo gameplay in the game (yeah, watch me play).

 

GAME FEATURES:

  • TOP 100 LEADERBORD (FEEL FREE TO FILL IT!)
  • FAST-PACED GAMEPLAY
  • TOUCH & KEYBOARD CONTROL
  • HOT SOUNDTRACK & FX
  • BLAZING EFFECTS
  • VARIOUS BRICK STYLES
  • CLASSIC & ADVANCED BRICK SHAPES
  • DEMO MODUS (REPLAYS A SAVED GAME)
  • PERSISTENT GAME SETTINGS (COOKIE)
  • VISUAL BRICK DROP GUIDE
  • PFFF... SOME MORE... ETC...

 

VIDEO:

https://youtu.be/9PxLIBIv4W8

 

PLAY:

http://mike-vom-mars.com/games/arcatris/

 

FEEDBACK:

Just let me know if you found a bug or if you are missing a funny feature. The game is quite extendable, so I'll keep extending it whenever I have the time to do so.

Share this post


Link to post
Share on other sites

I recently found pixi js and immediately fell in love with it. Currently I made just 2 projects.

 

Freude Quest is a game currently used as physical installation in Goethe Institut Bratislava - controlled with Leap Motion. It will be available online in december after the exhibition.

 

video and some reading

 

and a small "rope play" in the hero element on our webpage

 

thanks for the good work

Share this post


Link to post
Share on other sites

@Prozi great work on Chiland, looks awesome. only issue I had was that clicking to attack also moved my character, so I died, quickly and a lot.

 

Thanks,

 

Hmm I'll think about that

 

as a workaround you can upgrade your stats of health regen and power not to die so much

good luck! :)

Share this post


Link to post
Share on other sites

Hello!

We used pixijs for the companion app of an interactive storybook that we're building.

We use opencv to recognise a markerless target from the book and the scene comes to life in the app where the user can interact and progress the story.

The animations and interactivity are implemented using pixi js.

You can check it out here http://jimmyandthemagicphone.com/. (it's an ios app)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.