rich

Pixi.js has landed

30 posts in this topic

post-1-0-92991900-1361358810.png

 

"For the last few months we’ve been hard at work, deep in the Goodboy code mines digging up a little treat for you all.

So without further ado (insert drumroll here), it gives me great pleasure to introduce pixi.js!

The aim of this project is to provide a fast, lightweight 2D library that works across all devices, both mobile and desktop. The pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It’s also fast ;)

Another javascript engine, eh?!

“Why should we care?” I hear you ask “Theres loads of these engines out there!” To that I say, good question! Read on…

Although I fully intended pixi.js to be used to make wonderful, juicy HTML5 games, it is not a game engine – it is a rendering engine. It puts things on your screen and thats it, although I think it does that quite well though :D This means you can use pixi.js in conjunction with all the other great libraries out there in javascript land without having to choose ‘A’ over ‘B’.

I like to think of pixi.js as more like a 2D version of three.js so it will enable people to build all kinds of great 2D web experiences that we’ve all been building for years in Flash. Of course, games are definitely high on that list of potential applications!

Another important goal of pixi.js is to tap into the raw power of webGL for its rendering speed. WebGL is an increasingly important web tech and many browsers are now supporting it by default (Gold stars for youChrome and Firefox!) and crucially mobile browsers are beginning to use it too. Firefox and Chrome beta both support webGL in their Android iterations, and I would bet my left leg that it won’t be long until safari iOS will support it too (its supported in thier iAds already)!

Pixi.js does a great job of abstracting away all that crazy webGL shader hoohaa unlocking all that speed for everyone to play with. Its worth noting that it automatically handles sprite batching behind the scenes allowing for incredibly fast rendering without any extra hassle.

Of course pixi.js also has a renderer that comes in canvas flavour that is optimised to the nuts too. This means that pixi.js stuff will also run on pretty much every mobile and modern browser (ie9 included!)

I guess it’s also worth mentioning that I didn’t want there to be any visual differences between the two renderers… so there aren’t any :) Lovely for a bit of graceful degradation, or progressive enhancement depending on which side your bread’s buttered!?"

Lots more details here: http://www.goodboydigital.com/pixi-js-has-landed/

hafdong, Mat Groves and michalbe like this

Share this post


Link to post
Share on other sites

if it does what it say I'll definitely adopt it !

I usually prefer to write the game logic my way without using a game engine, but when it comes to renderer, I redo the same job each time I write a game.

hope this library can help me solv performance problems on tablets for my isometric renderer :)

Share this post


Link to post
Share on other sites

The demo is lovely for sure, although I'm having issues on some mobiles. It doesn't work on iOS5 for example, which is a deal breaker for my clients :( and Windows Phone was having a few troubles but easily solved I think. Very nice though, be glad to see this evolve.

Share this post


Link to post
Share on other sites

hello! 

Ezelia, I know exactly how you feel! Its pretty much why we made pixi.js. I love doing game logic too but find myself endlessly repeating the visual stuff :)

I'm glad you bought up the iOS5 issue Rich, we dont have any devices over here running it at the mo :( . It shouldn't take too long to fix once I get my hands on an iOS5 device i imagine.. is there any major differences between ios5 and ios6?

Share this post


Link to post
Share on other sites

Hey mat, good to see you here :) on iOS5 you get a classic 'undefined: TypeError: 'undefined' is not a function' :) But I see logs for 'init ok!', a whole bunch of objects and the rpr.js outputs something too. The preload finishes, it just doesn't get beyond it.

Share this post


Link to post
Share on other sites

Wow .. this sounds like a cool concept. Since I am writing my own framework for HTML5 already - this might become handy since it just replaces the renderer.

 

I will keep an eye on this project. Thanks for sharing!

Share this post


Link to post
Share on other sites

Doesn't work on FirefoxOS as well. But it could be nice benchmark to test our brower there :).

 

Maybe you or Dees could ship him a Firefox OS device for testing on? It would certainly make for an extremely good demo.

Share this post


Link to post
Share on other sites

Yes, good to be here to! This new forum was a great idea! Thanks for checking the error. From the looks of it that means its most likely an "i should code my game better" error rather than a pixi.js issue. Still will take a proper poke around tonight as to what could be causing it.

 

Happy to get it working on Firefox OS for ya michalbe, if you could let me know what errors your getting it maybe an easy fix. If not, as Rich suggested we would be be more than happy to get it working on a Firefox OS test device for ya if you're up for it ;)

 

The most important thing for me is that I want pixi to run on everything that has a browser in it.. build once play everywhere :D

Share this post


Link to post
Share on other sites

We don't have any devices for now, Geeksphones will be shipped in mid April, I will try to do my best with geting one for you.

Logs of my browser just before your game crashes:

E/GeckoConsole( 2903): [JavaScript Warning: "Unknown property 'box-sizing'.  Declaration dropped." {file: "http://www.goodboydigital.com/runpixierun/" line: 0}]E/GeckoConsole(  107): [JavaScript Error: "DataCloneError: The object could not be cloned." {file: "app://browser.gaiamobile.org/js/places.js" line: 471}]E/GeckoConsole( 2903): [JavaScript Warning: "Error: WebGL: Exceeded 2 live WebGL contexts for this principal, losing the least recently used one." {file: "http://www.goodboydigital.com/runpixierun/js/pixi.js" line: 49}]E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/RunPixieRun.js:166 in init: init ok!E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/rpr.js:15 in anonymous: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/rpr.js:15 in anonymous: 8E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/RunPixieRun.js:322 in resize: 561.0017889087657

 

Cheers.

Share this post


Link to post
Share on other sites

Nice. I should mention that the game demo works surprisingly well on my iPad 3 and Nexus 7. I'm intrigued...

Share this post


Link to post
Share on other sites

wow this is impressive !
 

I have one question ; does pixi.js handles z-index ? I need that for an isometric game I'm making. I'm handling that with a stack, but if pixi.js can handle it for me I'll surly adopt it !

Share this post


Link to post
Share on other sites

Just tested the pixi.js game with the latest chrome version on my nexus4 android device with webgl enabled flags ... what can I say - it rocks as hell!

 

doormat23, any news on when Pixi.js source will be released. really looking forward to play with it.

Share this post


Link to post
Share on other sites

Thats great to hear Benny!

The source code will be released imminently. Literally just putting a couple of little examples together to bundle with the src and it should be good to go! :D

antonio and benny! like this

Share this post


Link to post
Share on other sites

Thats great to hear Benny!

The source code will be released imminently. Literally just putting a couple of little examples together to bundle with the src and it should be good to go! :D

 

Fantastic news ;-)

Share this post


Link to post
Share on other sites

This is pretty much exactly what I've been searching for. A fast 2d library that doesn't get in my way. I've been playing with it today. Looking forward to RenderTexture and Text support.

 

 

wow this is impressive !
 

I have one question ; does pixi.js handles z-index ? I need that for an isometric game I'm making. I'm handling that with a stack, but if pixi.js can handle it for me I'll surly adopt it !

 

As far as z-indexing goes, the DisplayObjectContainer class allows you to add renderables in a specific order, then draws them in order. I've been doing something like

container.addChild(map_bg_sprite);container.addChild(map_fg_sprite);

 

then later when I need to add a sprite nestled between foreground and background, something like this works:

 

container.addChildAt(character_sprite, 1);

Share this post


Link to post
Share on other sites

Hello everyone!

 

Thought this might be a good place to let you HTML5ers know that I have finally finished the first version pixi.js and it is now up on github :)

 

https://github.com/GoodBoyDigital/pixi.js

 

hope you all have fun using it! 

Good news ! I'll give it a try for my isometric project :D ... optimisation for this kind of renderers is really hard if I can gain some frames I'll be happy :D

Share this post


Link to post
Share on other sites

Good news ! I'll give it a try for my isometric project :D ... optimisation for this kind of renderers is really hard if I can gain some frames I'll be happy :D

 

Cool! lets hope it'll give you more frames! let me know how it works out for you :D

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.