Search the Community

Showing results for tags 'Pixi.js'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 246 results

  1. Hi all First of all, I wanted to thank/congratulate the creators of pixi.js; it is a great library! However I'm trying to achieve a relatively simple effect, but can't seem to figure out how. I've been playing around and looking through documentation, and it seems there is no way to blend color with a texture? I've tried masking, but as the description says this only appears to use the shape, not the color, of the mask. Is there a way to do this in pixi? If so, how? I'm using the autoDetectRenderer, as I want to support webGL and canvas devices. Obvisouly this would be easily doable with access to OpenGL, but I'd like a versatile solution that supports canvas as well. Even flash has this capability, I couldn't imagine it not being possible with HTML5/Canvas. Why leave this feature it out of such a great rendering engine? Or am I missing something? If you're unsure of what I'm trying to achieve, for example: I could have a single white sprite texture loaded in once, and blend the color of each sprite object to have different colors of the same image. This comes in very handy for particles and other effects, while greatly reducing assets. Thanks in advance!
  2. Hi, everyone. Please look at my first html5 game: You can play here Thank you.
  3. Well I know getting things to work on older versions of IE are not the highest priority... however- I chose pixi for some client work and of course they are having problems seeing it on IE9/Windows 7 I believe the problem is due to pixi using Object.defineProperty() which IE9 should be able to handle... but doesn't always. There's a lot out there about getting the browser into IE9 standards mode (or something) - but every combination of tags and doctypes I use only seem to fix the problem, only to have it broken the next time we open the browser. Using F12 developer tools to change the browser mode can fix it, but of course the end user won't be expected to do that. The start of my html looks like this: <!DOCTYPE html> <html> <head> <title>My Project</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta charset="utf-8"> Tried removing the IE=Edge meta tag but it gives me 'random' success. I'm basically ready to give up and convert to EaselJS which won't take me too long, but I'm still curious about this. Thanks for any clues!
  4. I'm testing out my pixi.js animations on various devices, and it has a small problem on the Android 4.1.1 browser- Nothing shows up until I tap the screen, and then I have to continue to tap or swipe to get the animations to play at all. Apparently if I don't touch, it goes into a paused state. The same phenomenon occurs on the pixi examples: Hoping this is just some 'setting' I need to flip ! Thanks
  5. Trying to figure out a way (or the best way) to scale the skin of a skeletons skin indepedantly from the scale property of the PIXI.Spine object. Being able to do so will allow us to create multiple scaled instances of objects and append skins of different resolutions. lines 8554 & 8555 of pixi.js is where the values are: attachment.scaleX = map["scaleX"] || 1;attachment.scaleY = map["scaleY"] || 1;scaleX & scaleY don't seem to be used in the data (of my skins at least). I have been experimenting with different ways to dynamically change the default values of 1.0
  6. Hello everyone! I just pushed a big fat pixi.js update on to the dev branch on github. Todays new feature is the PIXI.Graphics object. Its very similar to the flash graphics object and allows you to draw primitive shapes and lines. The cool thing is, is the webGL and Canvas implementations should both look exactly the same (not the easiest task thats for sure!) More info on how the graphics object was made can be found here if ya fancy: I hope you find the new feature useful! Mat
  7. Hi everybody, I'm looking for feedback for my new game called "Flipping Jellies" About the game : Flipping Jellies is an puzzle game, which will stress your brain a bit. Objective of the game is to order jellies to desired form by swiping them. Game have two different resolutions (320x480 and 640x960), thus is playable on the wide range of mobile devices and of course on desktops too. Tech info : - as the rendering engine was used fantastic pixi.js library, thank you - - thanks to pixi, game is capable to run in WebGL mode when available, with canvas fallback - as tweening library I used - also big thanks, guys PLAY THE GAME NOW Thank you, -bubamara
  8. Hi! I'm developing a game using ejecta and pixi.js. What I noticed is that I can easily put 400 elements (bunnies) and render them @60fps, but when trying to do the same with spine animations I can go as far as 15 items before the cpu load goes wild and performance decreases. Is there a way to optimize spine object creation and rendering? Below is an example derived from the spine boy demo: function onAssetsLoaded() { var num = 10, spineBoy = []; for (var i = 0; i < num; i += 1) { spineBoy[i] = new PIXI.Spine("data/spineboySpineData.json"); spineBoy[i].position.x = i * 40 + 40; spineBoy[i].position.y = h; spineBoy[i].scale.x = spineBoy[i].scale.y = h / 2400; spineBoy[i].stateData.setMixByName("walk", "jump", 0.2); spineBoy[i].stateData.setMixByName("jump", "walk", 0.4); spineBoy[i].state.setAnimationByName("walk", true); stage.addChild(spineBoy[i]); }}
  9. After speaking with the guys from the pixi.js GitHub repo I've gone ahead and created a pixi.js Nuget package. Here's the web link: To install the package just type: Install-Package Pixi.jsInto the Nuget package manager console. Or you can always use the GUI. For those unfamiliar with Nuget, it's essentially Visual Studio's package manager. You can get it and learn more here (it's baked into VS2012+). This should allow people to get pixi.js with ease and also allow other libraries that use Nuget to take dependencies on the Pixi.js library to promote more open source goodness .
  10. Hi guys, I'm trying to create a basic tile scroller. At the moment, I'm creating all the tiles as sprites and then laying them out in a grid. Seems a little silly to have these "smart" sprites making up a tiled background map. Is there not some kind of "dumb" sprite that renders ultra-quickly that I should be using instead to render a tile? I'm also creating my worlds in a 2 dimensional static array of numbers as the map. Is this the smart way to do it? Thanks, Spider
  11. Hello. I have a problem with events on overlapped Sprites. I have a map with mouse events and user interface with buttons above map. When I hover on button, map also get this event and hovering element on map. I think, only one of Sprites (uppermost) must take event, but I can't understand how to do it. If anyone knows how to resolve this problem - I need your advice or links, if I miss something.
  12. I created a Photoshop CC plugin that allows you to export the layers and groups in your PSD file to specific locations, as well as send a WebSocket message to your client code of the changed files. With the extra bit of client JavaScript code I provide this allows for updating of textures in your Pixi.js or three.js (other frameworks would be easy to add) in real time. Check out some videos showing it off here:
  13. Hey everyone, Good news! Pixi.js v1.3.0 has just been released. Harder, faster, better, stronger! Heres the formal list of all the pixi.js v1.3.0 updates for you to check out too:Spine runtime is now much more robust with lots of little tweaks and bug fixes to make it more compatible.Spine runtime now supports skins.New Spine example (goblins) added to show how skins work.RequestAnimationFrame Polyfill updated.Custom object hitAreas can now be circles / rectangles / or polys.WebGL Shader optimised by removing projection matrix.Rendering now uses linked list to traverse objects increasing render speeds.Optimised addChild function. Its now way faster.Added new graphics object allowing for primitive drawing.New example added to showcase the graphics object.Added masks. A graphics object can now be used to mask another pixi object.New example added to showcase masking.Src code organised into nice new structure.Option to enable/disable antialiasing when creating a webGL renderer.Original mouse events now passed along to pixi interaction events.PreventDefault is now not called by the interaction manager on mouse down / touchStart.setInteractive replaced with the getter/setter interactive.Lots of other little bug fixes and tweaks that make pixi even better.We hope you enjoy it
  14. Hi! I just released ImpactPixi, Pixi.js renderer module for Impact game engine.
  15. Hello, I've just found Pixi and I think it's a really good library. I'm writing a small open source html5 videogame library that wraps around Box2D.js. I've decided to use Pixi.js to do the rendering process. One of the problems that I've been having with the library is that the MovieClip constructor doesn't satisfy some of my needs, which are: Easily have multiple sprite sequences asociated with one SpriteBeing able to indicate a variable step of time to the Sprite, so that, if frame rate slows down, the speed of the sequence stays the same.Being able to indicate frameRate in a fps format, e.g. 24 frames per second.In that regard, it was important for me to use the frame that was queued to be drawn instead of round it to the nearest frame.So I wrote a constructor and called it AnimatedSprite, although maybe other name would be more indicated. It works more or less like MovieClip, it also extends Sprite. One passes it a sequences object, for which each property is an array of textures that represents a sequence. e.g. var sequences={ "run":[runtexture1, runtexture2, runtexture3, runtexture4], "jump":[jumptexture1, jumptexture2, jumptexture3], "idle":[idletexture1, idletexture2, idletexture3, idletexture4, idletexture5],}One can also optionally pass a frame rate and the first sequence that's going to be ready to play. If frameRate is not passed, it will default to 60fps. If firstSequence is not passed, it will try to pick one from the sequences object, since the Sprite on Pixi.js cannot be set without a texture. It has the same methods from MovieObject to play(), stop(), gotoAndPlay(), gotoAndStop(). If one passes to gotoAndPlay() or gotoAndStop() a string with the name of a sequence instead of a number, it will asign the sequence and go to the first frame of that sequence. e.g. myAnimatedSprite.gotoAndPlay("jump");It doesn't loop for default, to make it loop, one can set the property loop to true. There is, like on movieClip, a method called onComplete that you can define. It is called when a sequence is completed. It is passed the name of the sequence so that you can manage according to what sequence has ended. To make the sprite advance in time, you need to call the method advanceTime each time you draw the stage. To make it work properly, you need to pass it the time in seconds that has passed since the last time it was drawn. If no time is passed to advanceTime, it will default to 1/60 seconds, which is the most common case. This is the constructor I was talking about: PIXI.AnimatedSprite=function(sequences,frameRate,firstSequence){ this.sequences=sequences; if(firstSequence==undefined){ for(var key in sequences){ this.currentSequence=key; break; } } else{ this.currentSequence=firstSequence; },this.sequences[this.currentSequence][0]); this.anchor.x=this.anchor.y=.5; this.frameRate=frameRate||60; this.onComplete=null; this.currentFrame=0; this.previousFrame; this.playing=false; this.loop=false;}//animatedSpritePIXI.AnimatedSprite.constructor = PIXI.AnimatedSprite;PIXI.AnimatedSprite.prototype = Object.create(PIXI.Sprite.prototype);PIXI.AnimatedSprite.prototype.gotoAndPlay=function(where){ if('[object String]'){ this.currentFrame=0; this.currentSequence=where; } else{ this.currentFrame=where; } this.playing=true;}PIXI.AnimatedSprite.prototype.gotoAndStop=function(where){ if('[object String]'){ this.currentFrame=0; this.currentSequence=where; } else{ this.currentFrame=where; } this.setTexture(this.sequences[this.currentSequence][this.currentFrame]); this.playing=false;}{ this.playing=true;}PIXI.AnimatedSprite.prototype.stop=function(){ this.playing=false;}PIXI.AnimatedSprite.prototype.advanceTime=function(dt){ if(typeof dt=="undefined"){ dt=1/60; } if(this.playing){ this.currentFrame+=this.frameRate*dt; var constrainedFrame=Math.floor(Math.min(this.currentFrame, this.sequences[this.currentSequence].length-1)); this.setTexture(this.sequences[this.currentSequence][constrainedFrame]); if(this.currentFrame>=this.sequences[this.currentSequence].length){ if(this.loop){ this.gotoAndPlay(0); } else{ this.stop(); } if(this.onComplete){ this.onComplete(this.currentSequence); } } }} If you don't want to call the method advanceTime and you don't care about maintaining constant animation speed when the frameRate of the whole stage varies, I guess adding something like this would work: PIXI.AnimatedSprite.prototype.updateTransform = function(){; this.advanceTime();}I decided to share this here because I believe this could be used for more things than game developing, so I'd be glad if this is useful to anybody. I haven't found any bugs yet, but I haven't had the time to do proper debugging. So if anyone uses this, could you help me? Also, maybe later I'll add a method to queue sequences easily.
  16. Hey peeps! Thought this would be a good place to show the Pixi.js roadmap. It should give you an idea of where we plan on taking pixi.js.. Create a Typescript definition file for Pixi.jsImplement Custom Render Item (currently being worked on by @GoodBoyDigital)Implement MaskingImplement Primative DrawingImplement Filters (currently being worked on by @GoodBoyDigital)Add Spine supportImplement Flash animation to pixiUpdate Loader so that it support XHR2 if it is availableImprove the Documentation of the ProjectCreate an Asset Loader TutorialCreate a MovieClip TutorialCreate a small game TutorialIf anyone has any more feature requests that dont fall into the list above then we are keen to hear them! Also If anyone wants to help out with anything in the list then by all means feel free to get in touch.
  17. Hey all! I am pleased to announce that I have just updated pixi.js over on github! More detail can be found on our blog: Enjoy!
  18. EDIT: NOTE - The performance issue does not seem to be a problem with Pixi.js. It more seems to be a browser/hardware related problem. Hi, today I finally wanted to give Pixi.js a try. Since I am most concerned about mobile devices I started with example 01 to see how it performs on mobiles. Unfortunately the performance seems not smooth at all. Is there anything wrong with my modified example ? Working example: I tested it on my Nexus4 (chrome) and I got around ~28fps. Any help appreciated. Best, benny!
  19. Theres a storm brewin' around pixi.js! Check out our new tech demo that showcases some of pixi.js new upcoming features! What new features I hear you ask? You can find out on our blog here. But if ya want the top line, we got: RenderTextureFiltersBlendModesTriangle MeshCome on in the water's lovely!
  20. Hello HTML5ers! We Just finished our our game "Fight for Everyone" and I really want to share it with you all. It was made it to complement this rocking tune Fight for Everyone by the Leisure Society. The basic gist is that you have to protect a deer from evil fox's by flinging them away! Its built using our open source engine pixi.js, so should hopefully work on all devices It uses multitouch too so its extra fun on an iPad! Hope you enjoy it!
  21. rich

    Pixi.js has landed

    "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 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: