Mat Groves

Pixi.js Showcase

Recommended Posts

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:

post-9391-0-84219600-1403894340.png

post-9391-0-05517400-1403893810.png

post-9391-0-19245500-1403893810.png

post-9391-0-87454100-1403893809.png

 

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.

Share this post


Link to post
Share on other sites

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 :) .

Share this post


Link to post
Share on other sites

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/

 

screen.png

 

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 !

Share this post


Link to post
Share on other sites

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

civbe-tech-web.jpg

 

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! :)

Share this post


Link to post
Share on other sites

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!)

Share this post


Link to post
Share on other sites

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:

 

blog4_postbug.png

 

blog4_bees.png

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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)

 

7TipF6t.gif

Share this post


Link to post
Share on other sites

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)

 

7TipF6t.gif

 

Very cool. Is the isometric engine homemade?

Share this post


Link to post
Share on other sites

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.

 

Dtdxd2B.jpg

 

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.

Share this post


Link to post
Share on other sites

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.
 
cham-screen.png
 
screenshot-anim.png
 
Trailer and Website
 
Please check out the trailer video to find out more about what I am describing:
 
Website:
 
Pixi.js Web Demo:
 
Full documentation provided:
 
Contact:
creature@kestrelmoon.com
 
Thanks for reading this post and let me know if you have any questions!

Share this post


Link to post
Share on other sites

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

 

screenshot.jpg

 

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

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.