Search the Community

Showing results for tags 'pixi'.

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
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 380 results

  1. Hi, I'm an animator and I have no knowledge regarding coding and programming. recently our parent company (game developer) told us we could use pixie particles online editor for creating particles in HTML5 games and the asked us to go to the "" and create an emitter so they could use that particle in our designs. I realized it would be better if I could make an HTML file to preview the particle. a very simple animation to send the particle spawning point around a square. like this the problem is, the deeper I go the darker it gets!!! the problem is I don't even know what I have to learn before attempting to make it work!!! is it HTML? is it java? do you call it Scripting ??? is the place to go to get information? so far I think I need to create a server? install Pixi js (i don't know how) install npm ?? (I don't know why?) this is very confusing write know
  2. AndrewJS

    Fastest way to do masking?

    Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile. I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites. It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object. Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays. The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite? I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now: I just found the following with a possible alternative using multiply blending: To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this? Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture? Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.
  3. gsknbabu

    Infinite Scroll

    Hi, I want to allow the user to either scroll to document bound borders endlessly i.e Infinitely drag on the canvas. Please help!!! Ex: A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas. Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser. Please refer the link where user can start dragging the rectangle to the boundaries, scrolls automatically towards the mouse pointer. Thanks, Naveen.
  4. Siddi

    Dispatch Events

    Hi, I'd like to develop some automated UI tests for my PixiJS application (PixiJS 4.8.1). My test procedure should look something like this later: const test = new UITest(){x: 100, y: 80}) test.drag({x: 100, y: 80}, {x: 120, y: 40}) test.dblClick({x: 200, y: 120}) etc. For this I have to trigger events. I know that the InteractionManager and DisplayObject inherit from EventEmitter. Which option is the best way to trigger events? 1. directly on the canvas element? const originalEvent = new MouseEvent('click', { bubbles: true, cancelable: true, ... }) app.view.dispatchEvent(originalEvent) 2. or via app.renderer.plugins.interaction.onPointerUp (originalEvent) for example? 3. or via app.renderer.plugins.interaction.emit(originalEvent) Unfortunately, I have not yet managed to trigger an event with these three ways 😞 What already worked was to call the emit method directly on a PIXI.DisplayObject, but I needed to create a PIXI.InteractionEvent object myself, which was quite expensive ... Thanks in advance! Siddi
  5. Hey everyone! Sam from Bitfox Games here for our studios' first post (and definitely not last!). I'm here to introduce our inaugural game release (well, it's been out for a couple of months now ). ( AKA Battle Royale: Unsung Heroes is a multiplayer 2d battle royale shooter. It features over a dozen different weapons, a 2d pseudo-isometric perspective, and a massive map. Gameplay consist of, well, trying to be the last person standing! Scrounge for weapons, healing items, weapon attachments & scopes. If you die early in a match, you can spectate the remainder of the round as a ghost, or queue for another server immediately. In order to survive, you have to outsmart your opponents! Since launch we've seen millions of rounds of battle royale played, and many other fun stats viewable on our website. We used PIXI for our visuals, Nengi.js + Node for our networking layer (and some client-side niceties that the library, and developer @timetocode, provides - he's actually a part of our team and actively works on If anyone has any questions about the way we've implemented anything, please don't hesitate to ask! Additionally, we would love feedback from other HTML5 game developers. There are bugs; but if you find any, let me know! There's a chance it's not already in our bug tracker. Some features that are on our near-future roadmap are: - Teams Mode (squads & duos) - Grenades - Two weapon slots Always open to more suggestions as well
  6. Hello! In the age of flash there was a well-known MVC frameworks. A lot of small and big, 2d, event-based games, portals, apps are built upon it. And now flash is almost dead. But the people and companies still has the same needs from that kind of content (games, engines, portals, ..). Our team found a very similar solution PIXI + custom MVC + Typescript. PIXI is so web and we have to maintain PIXI - a problem. 1. What framework should be used to create an event-based game today? Phaser - no. It's big for games without any physics and no onFrameUpdate needs ? 2. Is there out any new framework/approach to build and structure that kind of applications ? 3. Do you have some good ideas at whole? Give more ideas, solutions, best practices on web and etc. Thanks !
  7. The chart that is built on PIXI had sharpness problems and those sharpness problems were solved after avoiding half-integers and linestyle alignment. But now chart has some dark spot when plotting a diversified data in a large number of a dataset and for a small dataset, can't see any dark spot on the chart. I am not sure changes that have done for solving sharpness is causing this problem. Kindly support me to solve this problem.
  8. Hello, developers! I am wondering about PIXI v.3 or v.4, how much they can live and work on the internet. Imagine now I start big project on v.3 or v.4. This project should be licensed with little exceptions. Should I extract the whole code related to PIXI(my view) to be specially maintained over the time? What is the experience on similar cases? What is the risk?
  9. Harryk89

    Not work PIXI.RenderTexture

    Why not work on my laptop PIXI.RenderTexture, on another computer, the code works fine. The example also does not work on my laptop.
  10. Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active the pointer lock, just click inside the blue square. if your move the mouse, your will see that the behavior is a little messy when the mouse flies over a white square. An idea on a good approach to create a similar system? Am using GSAP libs. thank a lot for help. my source code am trying patch look like this , but it very similar to the code pen demo. /*: // PLUGIN ░────────────────────────────────░MOUSE INTERACTIVITY░───────────────────────────────┐ * @author β–‘ Jonathan Lepage (dimisterjon),(jonforum) * @plugindesc MOUSE ENGINE * V.0.1a * License:Β© M.I.T β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ Controle tous ce qui est associer a la sourits, interaction avec player et camera engine Initialise avantr le loader , seulement pendant la sceneBOOT */ // β”Œ-----------------------------------------------------------------------------┐ // GLOBAL $mouse CLASS: _mouse //β””------------------------------------------------------------------------------β”˜ function _mouse() {; }; _mouse.prototype = Object.create(PIXI.Container.prototype); _mouse.prototype.constructor = _mouse; $mouse = new _mouse(); console.log9('$mouse: ', $mouse); //$mouse.initialize() _mouse.prototype.initialize = function() { this.icon = null; this.x = this.y = 0; // mouse coor this.sensiX = this.sensiY = 0.8; this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10 this.screenX = 1600; this.screenY = 900; this.mouseIsDown = false; // mosue is down indicator // check if started path selector this.tweenLastCase = null; this.startedPathCase = null; // easing mouse this.tween = new TweenLite(this.position, 0, { x:0, y:0, ease:Power4.easeOut, }); this.createSpriteMouse(); this.createListener(); //this.debug(); // FIXME: REMOVE }; //β”Œ-----------------------------------------------------------------------------┐ // $mouse.createSpriteMouse(); // create the sprite spine mouse and default animations //β””-----------------------------------------------------------------------------β”˜ _mouse.prototype.createSpriteMouse = function() { const sprite = new PIXI.Sprite.fromImage('/img/mouse.png'); sprite.anchor.set(0.5,0); this.icon = sprite; this.iconLight = new PIXI.lights.PointLight(0xffffff,0.5); // the sceen FX sun this.addChild(sprite,this.iconLight); }; //β”Œ-----------------------------------------------------------------------------┐ // $mouse.initialise(); // initialise mouse grafivs and all listener //β””-----------------------------------------------------------------------------β”˜ _mouse.prototype.createListener = function() { // mouse listener document.addEventListener('mousemove', this.mousemove_core.bind(this)); document.addEventListener('mousedown', this.mousedown_core.bind(this)); document.addEventListener('mouseup', this.mouseup_core.bind(this)); document.addEventListener('wheel', this.wheel_core.bind(this)); // frames window listener //document.body.onwebkitfullscreenchange = this.windowResized; // FIXME: F4 FULL SCREEN VOIR LA REQUETE FAITE PAR RMMV document.body.onresize = this.windowResized; document.body.onblur = this.windowBlur; document.body.onfocus = this.windowFocus; }; //β”Œ-----------------------------------------------------------------------------┐ // event: windowResized, _mouseblur, _mousefocus // listener related to fullScreenManager and the API pointer lock //β””-----------------------------------------------------------------------------β”˜ _mouse.prototype.windowResized = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; _mouse.prototype.windowBlur = function(event){ document.exitPointerLock(); }; _mouse.prototype.windowFocus = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; //β”Œ-----------------------------------------------------------------------------┐ // event: _mousemousemove // event that compute the current mouse position and move the icon //β””-----------------------------------------------------------------------------β”˜ _mouse.prototype.mousemove_core = function(event){ // determine the direction this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0; this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0; this.x+=(event.movementX*this.sensiX); this.y+=(event.movementY*this.sensiY); // overScreen reasigment position this.checkOverScreen(); // check camera !this.mouseIsDown && $camera.onMouseMove(this.x,this.y); // check cases const inCase = $cases.onMouseMove(this.x,this.y, this.mouseIsDown); if(inCase && this.tweenLastCase !== inCase){ this.tweenLastCase = inCase; this.moveToCase(inCase,0.5) } console.log('inCase: ', inCase); if(this.startedPathCase && this.mouseIsDown){ this.computePath(); } }; _mouse.prototype.checkOverScreen = function(){ if(this.x>this.screenX){ if(this.dirH === 4){ return this.x = this.screenX; }; }else if(this.x<0){ if(this.dirH === 6){ return this.x = 0; }; }else if(this.y>this.screenY){ if(this.dirV === 8){ return this.y = this.screenY; }; }else if(this.y<0){ if(this.dirV === 2){ return this.y = 0; }; }; }; // $camera.moveToTarget(); _mouse.prototype.moveToCase = function(inCase, speed,ease) { console.log1('inCase: ', inCase.getGlobalPosition()); const p = inCase.getGlobalPosition() this.tween.vars.x = p.x; this.tween.vars.y = p.y+(inCase.heigth/2); speed && (this.tween._duration = speed); this.tween.invalidate();; console.log('this.tween: ', this.tween); }; _mouse.prototype.computePath = function(){ if($cases.current){ // if case not exist in array, add it if(this.startedPathCase.indexOf($cases.current)<0){ this.startedPathCase.push($cases.current); } } }; //β”Œ-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //β””-----------------------------------------------------------------------------β”˜ _mouse.prototype.mousedown_core = function(event){ this.mouseIsDown = true; if($cases.current){ this.startedPathCase = [$cases.current]; $cases.onMousedown(); } }; //β”Œ-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //β””-----------------------------------------------------------------------------β”˜ _mouse.prototype.mouseup_core = function(event){ this.mouseIsDown = false; if(this.startedPathCase){ $player.moveToCase(this.startedPathCase[this.startedPathCase.length-1]); this.startedPathCase = null; $camera.onMouseWheel(1); } }; //β”Œ-----------------------------------------------------------------------------┐ // event: wheel_core // event when mouse whell //β””-----------------------------------------------------------------------------β”˜ _mouse.prototype.wheel_core = function(event){ // allow to add what need, example if on element do other thing than zoom .. $camera.onMouseWheel(event.deltaY<0 && 0.2 || -0.2); }; //$mouse.debug(); // add debug feature mouse mouve //TODO: REMOVE ME _mouse.prototype.debug = function(){ var debugMouse = this._mousemousemove; // (dX: ${~~(mX/Zoom.x)+ScrollX} this._mousemousemove = function(event) {,event); document.title = ` x: ${~~this.x} y: ${~~this.y} || mapX: ${ (this.x/$camera.zoom.x)+$camera.position.x } mapY: ${ (this.y/$camera.zoom.y)+$camera.position.y } || `; }; document.onmousemove = this._mousemousemove.bind(this); };
  11. About MGN Studios: MGN Studios is the new game development division of Freedom! Family Limited. Our mission is to create great games and technologies that actively engage and involve the YouTube community of players, bloggers, reviewers and creators. We’re setting up shop right here in beautiful Vancouver! If you want to join a start-up where you get to work remotely and build something new, and be a part of an honest & transparent leadership team with a veteran Studio Head, then MGN Studios is for you! THE ROLE: Are you up for the challenge? We are currently seeking a Senior Game Engine Developer to join our team in leading the architecture and development of browser-based video game engine technology. You will be the driving force in the design and development of our studio’s game engine infrastructure. You should be comfortable diving deep into technical architectures and requirements, able to quickly identify solutions to challenges discovered during development, and ready to direct and mentor other developers in creating a robust and scalable code base. Prior experience building browser-based multiplayer game technology is preferred. We are looking for someone to be a key participant in the creation of a collaborative environment that leverages agile development and rapid prototyping; rewards creative solutions and intelligent risk taking; fosters a culture of excellence, respect, and fun; and makes great games. RESPONSIBILITIES: Are you ready to make a contribution to our team? Lead the design, implementation, and growth of a browser-based HTML5 multiplayer game engine. Manage and mentor a team of software developers through the interactive development process. Set company-wide code development standards and best practices. Work with game designers and artists in the development of game features, art pipelines, and tools. Partner with producers, PMs, and other leads on schedules and plans. Identify technical and production issues/risks and propose solutions. QUALIFICATIONS: Do you have what it takes? Degree in Computer Science and/or relevant professional experience. 5+ years experience in professional software development. 3+ years of experience in the development of game engines. Very good knowledge of existing game engines (e.g. Unity, GameMaker, Phaser, Pixi, Turbulenz, etc.) and server side technologies. Deep knowledge of modular programming, API design, and game architectural patterns. Extensive experience with frontend and backend technologies such as HTML5, Javascript, CSS/CSS3, jQuery, PHP, Python, Node.js, MySQL, etc. Source revision control experience (Github preferred). Professional experience in agile software development. Experience working effectively in cross-functional game teams. Excellent oral and written English communication skills. Experience developing MMO city builder games is a PLUS Experience developing casual MMO .io games is a PLUS Experience with Apache Ant, iOS WebKit, Android Webkit / Chrome is a PLUS Knowledge of video platforms including YouTube, Dailymotion and Twitch is PLUS COMPENSATION: Competitive Salary Flexible work hours Flexible work locations (home, office, etc.) Are you intrigued? Here are a few more reasons to make MGN Studios your daytime/anytime home: Work remotely - Did we already mention you get to work remotely? Yes, it’s true! Leadership - Do you like working with veteran Studio Head who will give you clear direction, honesty and guidance, and believes people are the pillars to success. He’s the opposite of an evil villian with a curly moustache. Build something new - Play a role in building a game development studio that can’t stop and won’t stop growing. Career growth - Make an impact by leading projects and driving the direction of the studio. Develop initiatives and solutions that drive your career and boost the studio’s growth. For Freedom! Does this sound like you? Please apply asap as we are interviewing immediately for this permanent, full time position. PM and we can arrange a time to speak over the phone!
  12. Hi, I made a web-app for planning and visualizing time segments. It looks like this in action: napchart gif2.mp4 I do all the calculations in pure Javascript, and had to write a lot of code to code all the shapes make hit detection work for all shapes. I am drawing all elements in HTML5 canvas. I am looking into refactoring the codebase and adding more features. In that case I am wondering if a library rendering to WebGL would help me? Things I want: Easy way to prevent text overlapping Easy way to add small animations and slick effects Smooth animations with more complex and advanced shapes than in the video. The bottleneck is when animating the shape, and then the JS have to calculate all elements every frame, but would WebGL help with that? This is a non-trivial usecase, and I think it may be best to just use pure JS and canvas, but to be honest, I don't really know how WebGL works, and in what way it helps. Any WebGL heads here?
  13. Hi, guys. NeutrinoParticles plugin for PIXI is tested and released. You can download the Editor and check out video tutorials, samples and live demos at It is the best particle editor for PIXI. Isn't it?
  14. Tymski

    Cordova + Pixi = β™₯?

    Hello everyone. It was probably a year since I posted anything. Good to be back here. I had a looong break with hardcore html5 game development. Can you suggest a good way to start a cordova + pixi project for android? Can you recommend any tuts and share some of your experiences with developing mobile apps with pixi I look forward to reading about your experiences!
  15. sta-ger

    Scaling down big images quality

    Hello! I have a trouble when scaling down big assets. I just have a stage contains some sprite and i'm doing: stage.scale.x = stage.scale.y = 0.2; As a result I have an ugly ragged image. I found a solutions for a simple canvas drawing without pixi from here Can I achive the same smooth effect after rescaling in PIXI?
  16. We are looking for developers who can create our single-page web-based mini-games. We prefer to finalize the hiring in freelancer websites like Upwork to ensure proper delivery and payment. We have several in the pipeline and it has become a bit challenging to find Pixi developers in Upwork so we are trying our chance to find developers here.
  17. I have a game with a lot of containers and sprites. I used GPU-Z for testing. After I replaced all containers and sprites with 2D, GPU load decreased on 20% What is the reason of that? What is the difference between container / sprites and container2d / sprite2d?
  18. mazoku

    Car Racing

    Simple car racing game. Made with Pixi this time. Link
  19. paperjack

    Visibility of overlapping containers

    Hello, I am making an arena shooter multiplayer game with destroyable obstacles. You can see a pre-alpha here: I have encountered a problem I'm not sure on how to proceed on and I surprisingly couldn't find any information on similar issues. My game will have tall walls and other obstacles which can potentially cover the player's character. I would like to make an effect similar to RTS games, where an outline or a shadow of the player is visible on top of the obstacle. See the below picture to get an idea of what I mean. My player container contains several sprites. I have a few ideas on how to do this, but I do not think they are optimal. One is rendering the player container to a texture and using that a mask for potential overlapping obstacles, along with a filter. Secondly is just placing a simple GUI marker that shows where the player character is. In both cases, I am unsure on how to detect overlapping sprites. Is there an established solution for such cases? Thanks!
  20. Muhammad Adnan

    Drag and dropping in a container

    Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
  21. Is there a way to bind mouse action on PIXI.Graphics line?. I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. this.strategyGraphic.interactive = true; this.strategyGraphic.hitArea = this.strategyGraphic.getBounds(); = function (data) { alert('hit rect'); } Would like to hear any advice on the subject. Thanks in advance!
  22. charlie_says

    PIXI Loader handling failed loads

    This is more a question about how people try to do things rather than a problem with PIXI per se. What I've found is, if I force the loading to fail (by turning off WiFi or similar) PIXI behaves as expected, an error event is fired, and then the game will play but with missing assets. The question: How do people gracefully handle the failure? Do you force the loader to start over? Push the error items to an array and reload? (I think this one is good, but there's a possibility that you could get caught up endlessly in the game retrying); Ignore it? (hey it's the internet, things break from time to time!) Create an error screen, which has a link for the player to start over? (this is probably the best option.) Thanks!
  23. Igor Georgiev

    iOS soft fullscreen. How?

    Hello guys. I am struggling with having my game to run on minimal-ui on iOS safari. That is where the address bar becomes smaller when you scroll. I have found a game that does that, but how the hell they do it? CLICK Does anyone know how to achieve this?
  24. charlie_says

    (pre)Load video issue

    I'm having some issues loading videos... I can get them load ok, but, as I've got a number of separate videos that I need to sequence together seamlessly (or as close as possible to) I'm preloading them, or trying to... ...but, despite the texture appearing to have loaded, there's a delay in starting playback. I've tried a number of things, but would welcome any ideas that anyone has to getting an accurate idea of how much is loaded? I did have an idea that I could load a video as a blob, but I couldn't find an example of loading an item as a blob and then converting it, any leads on that would be welcome.
  25. OlegShaygu


    Hi! I'm a newborn at Pixi.JS and ask your help. I'm trying to put 4 characters on the stage in one line. They are moving one by one (in ticker function). Stage width is 928px. The gap between characters is 800px. And I can't understand why first three characters are put at the stage right way, but the last one is above the third one. It seems like the the width is not enough. What should I do?