Mat Groves

Pixi.js Showcase

Recommended Posts

Hello!


We used pixi 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

Hi guys!

If somebody need - Pixi.js v.3 and ES6 game example

https://bitbucket.org/tmakota/coun4

 

Enjoy!

PS. AI not fully implemented, only horizontal lines

 

It's really good to see people posting the code for their game to help others learn.

 

I'm not sure where you've copy-pasted large chunks of it from but your tabs are all over the place. If your editor can't handle normalizing your tabs can you run a beautifier over the whole lot or something, because its pretty unreadable in the browser at the moment.

Share this post


Link to post
Share on other sites

Hi, this was my first experiment of interactive graphic developed in my spare time.

It was originally written in AS3 some years ago, but the source code was a mess.

This month I did some cleaning and translated it in JS using PIXI.

You can create notes with paper-like effects (you can drag and turn both sides).

I called it Pi Note: http://myrepo1010.github.io/pi-note/

Hope you enjoy it :)

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.

 

Now RMB doesnt move your character,

also SPACE and WSAD/arrows moving for oldschool people

Along with another 100 updates

Share this post


Link to post
Share on other sites

Hi folks. I'm working on a sort of Missile Command/tower defense mashup, and I'd love to hear feedback or suggestions. I love Pixi; it makes it so easy!

Kingdom Come http://www.eggborne.com/kingdomcome

 

Nice work, a great start.

 

It did get easy really quick, by about wave 7 or 8 or so I hardly even saw an invader anymore as they were destroyed as soon as they spawned.

Share this post


Link to post
Share on other sites
On 6-1-2016 at 8:26 PM, eggborne said:

Hi folks. I'm working on a sort of Missile Command/tower defense mashup, and I'd love to hear feedback or suggestions. I love Pixi; it makes it so easy!

Kingdom Come http://www.eggborne.com/kingdomcome

Nicely done, I like the game elements you put in the game. It's definitely fun to play and I think also allot of fun to create. Am I right? :D

Share this post


Link to post
Share on other sites

First of all I want to thank you guys for this amazing library! It has been a bliss finding pixi.js. The code is very well documented, you got a great community, and last but not least - it is the fastest cat in town. Thats why I stuck with pixi, cause in the end it outperformed three.js and other approaches in speed and usability.

Now the showcase:

I built a  zoomable interface for 1500 historical drawings. The visualization marks a new and playful approach to access large culture datasets, which are being made public these days. I used pixi.js to render all the images in the browser and added some optimizations & logic for handling that amount of textures in different resolutions.

http://uclab.fh-potsdam.de/fw4/en/vis/

destination.mp4

FW4.jpg

Share this post


Link to post
Share on other sites

Oh god, 2 years in the making, seeing this post and waiting to be able to answer here!

What a journey for our team, and a good one thanks to PIXIjs.

Today we are releasing our game, Celsius Heroes, worldwide. => http://www.celsiusheroes.com/

The game is an old school western RPG/Dungeon crawler with a match-3 combat system (inspired by Puzzle and Dragons).
We use PIXI for our UI and a homemade WebGL 3D engine for the 3d stuff. 
The game runs on Facebook, and Android/iOS thanks to Cocoon.io

https://apps.facebook.com/celsiusheroes/

https://itunes.apple.com/ca/app/celsius-heroes/id966885157

https://play.google.com/store/apps/details?id=com.celsiusonline.celsiusheroes

We learned so much during these 2 years and I have a special thank you for Mat and Chad that helped us a lot when the v3 was released. You are amazing and you sure are thanked again in our credits.

See you soon for another game!

Share this post


Link to post
Share on other sites
51 minutes ago, JDW said:

 

The game is an old school western RPG/Dungeon crawler with a match-3 combat system (inspired by Puzzle and Dragons).
We use PIXI for our UI and a homemade WebGL 3D engine for the 3d stuff. 
The game runs on Facebook, and Android/iOS thanks to Cocoon.io

 

So awesome! By the way, pixiv4 will have 3D plugin :)

Share this post


Link to post
Share on other sites

My ship simulator just went beta this week. It's not a twitch game but you may find it strangely addictive.

Ships2career.com is a Top down view ship simulator that uses Google maps and Mapzen vector tiles for land/water data. On top I placed a pixijs canvas on which I render the ships, their wakes and the ship control panels. Initially I wrote the game using kineticjs but it was too slow and support stopped. Glad that happened because Pixijs is so much better and faster.

http://www.ships2career.com

More info on my facebook group: https://www.facebook.com/groups/604877766331938/

 

14066426_10154422898196505_8814084680561328160_o.jpg

14231334_10154444004491505_2388399825540395402_o.jpg

14195425_10154437205296505_3043054101321036194_o.jpg

Share this post


Link to post
Share on other sites
16 minutes ago, dinther said:

My ship simulator just went beta this week. It's not a twitch game but you may find it strangely addictive.

Wow, Ports of Call was one of my favorites in the old days. Hope you implement the entire game :)

Share this post


Link to post
Share on other sites

HearstLive - https://www.youtube.com/watch?v=cBj5rGToDJ8

Permanent LED wall installation at Hearst Tower in NYC. The entire installation uses 7 million LEDs. It is more than 50 feet long and about 12 feet tall on both the 8th Avenue and 57th Street sides. Developed PIXI based display software running at UHD 4K resolution with 24/7 uptime. It integrates with a Laravel backend and is updated 4 x per day by an editorial team. Built with React, Node, Vim and PIXI You can see it at 300 W 57th St, New York, NY.

920x920.jpg

 

 

Share this post


Link to post
Share on other sites
10 hours ago, davydka said:

HearstLive - https://www.youtube.com/watch?v=cBj5rGToDJ8

Permanent LED wall installation at Hearst Tower in NYC. The entire installation uses 7 million LEDs. It is more than 50 feet long and about 12 feet tall on both the 8th Avenue and 57th Street sides. Developed PIXI based display software running at UHD 4K resolution with 24/7 uptime. It integrates with a Laravel backend and is updated 4 x per day by an editorial team. Built with React, Node, Vim and PIXI You can see it at 300 W 57th St, New York, NY.

 

 

WOW. So, does PIXI work on NODE? Which version of pixi?

Share this post


Link to post
Share on other sites
On 10/9/2016 at 11:15 AM, ivan.popelyshev said:

WOW. So, does PIXI work on NODE? Which version of pixi?

Haha, no nothing that special. Node was just part of the tools used on the project. Mainly node was used to pull down assets from a remote source and to act as a local web server. I locked everything down to their respective versions when I started the project so this is PIXI 3.0.9.

Another tool extensively used was Greensock.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.