Pixi.js Showcase

[6502moo]

I just started learning pixi.js and have put a few experiments up on my blog at http://6502.mooo.com. They are not too advanced but I think they illustrate how you can achieve interesting results with a little math and some randomness thrown in.

 

Screenshots:

 

Any comments and critiques are much appreciated, I have almost no experience with pixi.js and only a little with javascript, so I'm not exactly sure I'm coding in the right style or using the language and framework idiomatically.

[xianjimli]

I have written a Game UI for pixi.js, The project at github: https://github.com/drawapp8/gameui-for-pixi-js

 

Here are some demos:

 

http://pixijs.sinaapp.com/demo1/

 

http://pixijs.sinaapp.com/demo2/

 

http://pixijs.sinaapp.com/demo3/

 

 

[nuke22]

Hi

 

Been playing around with Pixi for a while now (very cool).

Here's an experimental interface I made with it a couple of months ago:

 

http://www.bigbadspaceship.com/nodes/

[george.i]

Hi,

 

I've just finished porting a HTML5 jigsaw puzzle  web app to PIXI for a client of mine.

You can check it out  here : http://www.dailyjigsawpuzzles.net - using a smart phone or tablet (or http://m.dailyjigsawpuzzles.net if you're too lazy and don't want to reach for your phone ). Just click on any puzzle.

 

I've stiil got some things to fix and improve but it's working very well so far.

I'm also using Hammer.js (http://hammerjs.github.io/) for some basic gestures.

 

Check it out and let me know what you think .

[Ezelia]

I'm developing on a Pixi.js particle system

you can test it here : http://labs.ezelia.com/particle-system/

it's ispired from this article http://buildnewgames.com/particle-systems/

I rewrote the whole code in TypeScript and refactored it.

now I'm adding some cool features to make it easily usable in games.

some screenshots

[MonsieurPixel]

Hi guys,

 

As this is a full Pixi.js game I thought it would be nice to share on this subforum too (I've posted a thing on the main board)

 

I've made this :

http://www.evilbuniz.com/

 

 

I would like to thank Mat Groves and his team a lot for creating such a beautiful tool. I made my game directly with Pixi.js, and it was really enjoyable to find the same coding style than in Flash, my previous coding platform. Thanks Mat for the help on the forum too !

 

Have a nice day !

[Nuggeta]

Our game Flight the Ninja is powered by awesome Pixi Engine. Thanks

 

http://ninja.nuggeta.com

[spleennooname]

Hi!

 

my first xperiment with PIXI.js and Inverse Kinematics

 

http://codepen.io/spleen666/pen/mfbdv

[aurbano]

I'm now porting to Pixi.js an old experiment I had done to practice using the canvas: Nebula

 

It basically displays text using balls that gravitate towards a fixed position on the text:

 

[josephseeley]

http://apolyton.net/content.php/1251-Civilization-Beyond-Earth-Tech-Web

 

I was lucky enough to get clearance to make an interactive mockup of the Tech Web from the soon to be released game Civilization: Beyond Earth from Firaxis and 2K games. It was my first real javascript project, pixi.js is awesome. Also uses mousetrap.js for some limited keyboard inputs ... I have a lot of ideas for using pixi in the future. Thanks so much for making it available!

[aurbano]

By the way as a follow up to my last post, I added a version that responds to a live feed of music using Chrome's audio analyser:

 

http://urbanoalvarez.es/Nebula/music.html

 

Here you will see some particles drawn in WebGL using Pixijs, along with HTML5 analysed using an FFT live, controlling Pixijs' BlurFilter.

[Sebi]

Hey Guys,

 

I want to let you know about my new plugin for pixi.

It's called pixi.draggable and it's the most simple way to get your drag and drop events done.

It also offers a huge variation of options to get almost any drag & drop feature done without caring about the stuff that has to happen in the background!

 

https://github.com/SebastianNette/PIXI.draggable

http://mokgames.com/playground/pixi/draggable/

 

Some tutorials and more examples will follow this weekend if I find the time to create those

 

I've just created a really simple demo:

 

http://mokgames.com/playground/pixi/draggable/demo.html

http://mokgames.com/playground/pixi/draggable/demo2.html (advanced demo)

 

You have a bag and a skillbar.

Items from your bag can be dragged to your skillbar.

However, the bag doesn't accept skills in it's slots.

 

This is done by defining the following:

 

skillbarSlot.droppable({  label: "slot",  accept: [ "item", "skill" ],  drop: function(item)  {    this.parent.addChild(item);    item.dropX = this.x + 3;    item.dropY = this.y + 3;  }.bind(skillbarSlot)})

The bag slots being defined as:

 

bagSlot.droppable({  label: "slot",  accept: "item",  drop: function(item)  {    this.parent.addChild(item);    item.dropX = this.x + 3;    item.dropY = this.y + 3;  }.bind(bagSlot)});

The items are defined as:

item.draggable({  label: "item",  revert: "invalid",  revertDuration: 0,  helper: "clone",  stop: function(item)  {    if(item.dropX)    {      item.x = item.dropX;      item.y = item.dropY;    }  }});

And skills are defined as:

skill.draggable({  label: "skill",  revert: "invalid",  revertDuration: 0,  helper: "clone",  stop: function(item)  {    if(item.dropX)    {      item.x = item.dropX;      item.y = item.dropY;    }  }});

Isn't it loveable how easy something like this can be done?

 

I will keep working on this plugin. There are quite a few other options that should be added.

Maybe i can improve this demo at the weekend!

Also check out the upcoming drag & drop batching!

http://mokgames.com/playground/pixi/draggable/demo3.html (This demo is only using 2 interactive items!)

[HemingwayGames]

Hi guys, cross posting from the main showcase board however I wanted to drop in to say how awesome Pixi.js is . Thanks for all the hard work making this a mighty fine rendering engine :-D

 

My game is a retro inspired digging game that I've been working on in my spare time over the last couple of years. I've cross compiled from c# using the Saltarelle Compiler and use Pixi.js to render using WebGL.

 

The game has some interesting features such as commanding bees to attack spiders. The spiders however fight back if the bees get stuck in the webs. 

 

More details about my game:

 

http://hemingwaygames.com/blog/postbug-is-alive

 

Trailer (edit 4/12/14):

 

 

And some screenshots:

 

 

[LaczkoUr]

Hi!
I have just released my first app made using Pixi.js! It's called:

JumpSlide Boy

You can check out the details in my main post:
http://www.html5gamedevs.com/topic/10956-jumpslide-boy-a-casual-but-irritating-runner-game/

Also.. while developing my little app I got so happy with Pixi that I made my very minimalistic app website based around it aswell.
http://glatar.hu/

[AaronEivers]

Hey guys, 

 

just stopping by to share a recent project we did for a client using pixi.js!

 

Transformers Comic Creator

 

Any feedback would be greatly appreciated and if anyone is interested in details I'd be happy to share.

[psychicsoftware]

I'm loving pixijs, thanks Mat!

 

I'm currently making a LAN-multiplayer shooter, with zombies. It uses nodewebkit and websockets, along with (of course) pixijs. Players can use a mix of devices, including phones as controllers (phone users will not see the graphics, and will see only twin-joysticks.. they'll have to peer over the shoulder of someone else while playing)

 

[msha]

I'm loving pixijs, thanks Mat!

 

I'm currently making a LAN-multiplayer shooter, with zombies. It uses nodewebkit and websockets, along with (of course) pixijs. Players can use a mix of devices, including phones as controllers (phone users will not see the graphics, and will see only twin-joysticks.. they'll have to peer over the shoulder of someone else while playing)

 

 

Very cool. Is the isometric engine homemade?

[psychicsoftware]

Thanks msha!  Yes, I did the isometric engine.. it's actually quite simple.

One important thing, of course, is to keep the game objects in the correct sorted order, from top to bottom, in the pixijs DisplayObjectContainer.

The other important thing is to have collision detection.

 

 

I use a 'collision' image for each displayable sprite (red overlay in this picture). I store these as png files and read them into an offscreen Canvas.. from there I can read their pixel values and write everything into an array of same dimensions as screen, which contains per-pixel collision info for the entire map as its being built.

 

The green dot in the image is the hotspot that defines the sprite centre. This is very important to keeping the draw-order correct, and for buildings like this one it coincides with the rear corner: it's the point at which a moving sprite switches from being in-front to being behind the building. Only moving sprites need to be checked at runtime, and only if they're moving in the vertical direction.. basically they keep checking through the DisplayObjectContainer's children array, and switching places with objects as long as necessary until the new correct position is found.

[AVENGER NO WAR]

We just made a  little game with pixi! yoohoo! out first try!

DOWNLOAD SOURCE for your website:

http://www.html5gamedevs.com/topic/12037-download-source-our-first-pixi-game/

[kyptov]

After the 4 weeks using pixi:

http://xcraft.ru/battle/index.php?battle_id=838bf8090fd38e2cf87dcfbb0eb3a76d&autoplay

The battle in record, don`t try to control

[kestrelm]

Hello Pixi.js Devs,

I am the developer of Creature, an exciting new  2D animation tool! With Creature, you can add stunningly fluid animation to your digital content. At the core of Creature is a highly advanced skeletal animation, mesh deformation and dynamics system. Creature supports the playback of your authored animation via a provided Pixi.js source runtime.

 

Creature is soon to be released in about 2 weeks time on the Mac App Store.

 

Save Time + Cost with Automated Animation

The main difference between Creature and other animation tools out there is its Directible Automated Animation Engine. What that means is the ability to procedurally generate, through an Automated but User Directible process, complex motion like Walk/Run Cycles, Tail Flopping, Wing Flapping, Cloth Dynamics and Flesh/Muscle response.

 

Such types of motion are normally very tedious to animate manually. With Creature, such tasks can be done in a much more efficient manner, resulting in huge time and cost savings! Of course the point of Creature is not to take away from animation as an art but to add to it. Hence all automated procedures can be tweaked, directed and in many cases manually adjusted.

 

 

 

Trailer and Website

 

Please check out the trailer video to find out more about what I am describing:

 

Website:

http://creature.kestrelmoon.com/index.html

 

Pixi.js Web Demo:

http://creature.kestrelmoon.com/more_info_3.html

 

Full documentation provided:

http://www.kestrelmoon.com/creaturedocs/Tutorials_And_Walkthroughs/Quickstart.html

 

Contact:

[email protected]

 

Thanks for reading this post and let me know if you have any questions!

[EricLesch]

Hey all,

 

Just wanted you to let you guys know about the PIXI.JS project I've been working on for the last year. Makemake.io is an animated website creation tool (kinda like flash). You can build your own site with the online editor and then publish it to the cloud, all for free. And because it's using PIXI, it has blazing fast performance.

 

Here are a few examples of sites built with Makemake.io.

 

http://example-planets.makemake.io/

http://example-designer.makemake.io/

http://example-photography.makemake.io/

 

http://ericlesch.com

 

Here's a screenshot of the editor

 

 

Anyway, I tried a few different options when I was building the tool, Fabric.js, Famo.us, but nothing had close to the performance of PIXI. So many thanks to everyone who has contributed to this project!

 

-Eric

[Yourangutan]

Okay guys, I know this is nothing special but I'm damn kinda proud of you for superceding the idea of everything that flash was supposed to stand for, and though I'm a refugee from the flash war, I just thought maybe you'd dig this.

 

http://www.peiro.de/goodies/html5/pixi/candle3.html

 

It's just tomfuckery.

[BTCJockey]

Hi.

My (pixi.js+socket.io) ONLINE HORSE RACING MULTIPLAYER GAME BTC JOCKEY

[MegaMarkHarris]

First full on client project with PixiJS + lotsa Greensock, video, etc. Thanks for the lib, and thanks to those who answered questions in this forum!

 

http://makenuclearhistory.org/