Search the Community

Showing results for tags 'pixijs'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 111 results

  1. Hi, I'm running into an issue regarding collision detection against adjacent DisplayObjects. Let's say I have sibling objects that are a child of a Container that has been rotated. If I use getBounds() on the siblings they return a bounding box that is oriented to cardinal north. Using those bounds for collision detection may result in false positives, because the given bounds may not follow the actual shape and orientation of the DisplayObject. I created a codepen to illustrate the point: When you toggle the "rotate" buttons at the bottom of the pen you will see the purple box morphing to the shape of the bounds for "shape" and "label". The text will change from red to green if the collision detection returns positive. I would like to do a more robust collision detection algorithm (possibly based on Separating Axis Theorem), but I would need to grab the vertices for each shape correctly translated to the global coordinates regardless of their nesting within the scene graph (accounting for scale, rotation, and translation from the shape and all parent transforms). The case being that the collision detection that I would like to do may not be only between direct siblings within the scene graph. Is there a nested property that would give me what I'm looking for, or will I need to grab the graphics data and apply all of the recursive parent transforms myself for each vertex? Here is a fork of a codepen that demonstrates the Separating Axis Theorem:
  2. Hello, I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default. There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  3. Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this... let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png')); stage.addChild(bg); It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it? Cheers!
  4. So i am trying to orbit a small sphere around a bigger sphere like so: var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= Gball.x*1.3; orbit.position.y = Gball.y/3; orbit.scale.set(0.15, 0.15); Gball.addChild(orbit); animate(); function animate() { requestAnimationFrame(animate); // just for fun, let's rotate mr Honeypot a little Gball.rotation -= 0.05; // render the container renderer.render(stage); } now the only problem is that when i click on the button to remove the child, but want him to keep the position he had in the animation: var ballX = orbit.x; var ballY = orbit.y; document.getElementById("bot").addEventListener("click", function () { var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= ballX; orbit.position.y = ballY; orbit.scale.set(0.15, 0.15); Gball.removeChild(orbit); return false; }); does anyone know how i might be able to do that?
  5. I am a student currently working on a simple Picture Reveal Game. The way it works is this: A picture is hidden behind a grid of squares. Each time you click on a square a trivia question pops up and if you answer it correctly part of that picture is revealed, if not, you lose points. The aim is to guess the picture. We will use an online API for the questions. That being said here are my concerns: I understand PixiJS is only a rendered with capabilities of taking input. Will pixiJS be sufficient for the game I am planning to build? I will need some sort of database that holds a collection of images (as I do not want to use Flickr API), and will also need to keep a track of the state of the game. Will PixiJS and regular JS be enough for this task? Or do I need another library as well?
  6. I'm learning Pixi.js with the goal of creating a game with a lot of UI complexity (imagine something like FreeCiv). I'm starting with small projects and trying to learn good fundamentals. However, I'm struggling to handle interactions in an elegant and flexible way. (cc @PixelPicoSean) I'm creating a Checkers game. Something like this: Here is the basic setup: var gameState = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2]; // Create some textures var boardTexture = PIXI.Texture.fromImage(/*...*/); var pieceSprites = new PIXI.Texture.fromImage(/*...*/); /*...*/ // Create and append our renderer /*...*/ // Create the scene graph var stage = new PIXI.Container(); var board = new PIXI.Sprite(boardTexture); stage.addChild(board); // Add some pieces var pieces = new PIXI.Container(); gameState.forEach(square => { /*...*/ var piece = new PIXI.Sprite(/*...*/); piece.interactive = true; board.pieces(piece); }); stage.addChild(pieces); // Render with requestAnimationFrame /*...*/ So far, so good! Now, I'd like for each of the 24 pieces to be draggable by the user. No problem: dragging is just a function of user events. But here's where I stumble. I could attach callbacks to each of the piece Sprites (this seems to be the idiomatic Pixi.js way). However, my instinct is want to listen to the pieces Container instead. In the DOM Event world, events firing on a piece would bubble up to pieces, and the resulting would point to a piece. In short: Is there any way to emulate "event delegation" here? EDIT: The answer should be yes, but the InteractionManager does not currently implement bubbling. (I opened #2342 on github.) It's an easy fix.
  7. Yatzy Solitaire - An HTML5 game by Hello, Yatzy is a classic and incredibly addictive dice game. Its features: - You can play it on every device: desktop or laptop, mobile or tablet, even on your Smart TV. - You can play as guest or as a registered user. - Daily, monthly and all time global rankings. - Free to play. As a HTML5 games developer, you might believe that it is an easy to develop game, but it takes advantage of the Websocket API, so that the game logic is executed on server side. We would like you to give us feed back on the game. Thank you very much.
  8. I'm new to pixijs, but what I've seen so far is very impressive. Great design of the API, naming of functions, variables, documentation, etc. Great performance. Congrats to the people behind it. I use my own sprite classes. Is there a way to bypass that part of pixijs? Optimally I just want to do a series of drawImage calls, where I pass a texture, frame rectangle (texture clipping), and transformation matrix, and its painted to the canvas in the order called. Very much like immediate mode rendering, instead of the pixijs scene graph which is more like retained mode rendering. Is there any example of this you can point me to? Or is the scene graph part of the optimization that makes pixijs high performance, so it would be worthwhile for me to rewrite my code to use pixijs' sprite classes? Regards, Bjorn
  9. Hi guys, i've bring this example with Pixijs and i've done a test. I put the canvas inside a div (#content), this div has transform: perspective(900px) and rotate(20deg). The hit area is not ok, 'cause has the old coordinates without calculate perspective. (see attachment) So, how can i get the new coords to pass to hitarea ? Thanks
  10. Ship wrecked Creatures! Save them all and collect as many stars! 250 exciting levels beautiful graphics 5 difficulty levels It works on all devices running IOS and Android fun music and voice creatures Many hours of gameplay For licensing to write to the email:
  11. Greetings I'm new to Pixi and I was under the impression that ios 8-9 can play inline video with webgl render texture. However everything works in desktop but in ios it still opens up native fullscreen video player. Is there any css styles or settings I'm missing? Thanks
  12. Anyone know the correct way to get plugins like pixi-spine into Angular 2 or Ionic 2? import * as PIXI from 'pixi.js'; works for getting the base pixi library in. But, how do you do something like import * as PIXI from 'pixi.js' and 'pixi-spine';
  13. Hello! My name is Dylan Jones, I work for a studio and we're looking for some contract help as our other developers are busy. We've created games like Battle Group in the past, and are working on a new multiplayer game. We currently have a contractor you might be working with, paid rates depend on speed and quality of work. Let me know if you or someone you know would be a good fit, server knowledge (currently using client authoritative firebase) is a must as we look at resumes (any work on .io genre games is a plus). I can provide more details on the code base (it's a working prototype with mostly clean states) but can not post it. You'll be working with talented folks, like Col Price, out artist for the game seen below: You can contact me on this thread or with Dylan-@-the-Dylan-Jones-.-com if you remove the dashes.
  14. Hello there! Please see our posting for this job over at: It's also below: Our game development studio is looking for a client side (minor server work) javascript PixiJS game developer. Past tiles upon request, but we have many AAA game developers and talent for our next multiplayer game. Our server infrastructure was built by a past full stack engineer hire from UpWork and forums along with our core team, you will work with them and our original team on bringing a version of our .io to the web market. We use Trello and Skype and expect checkins a few times week. We are a small studio with limited budget, but we respect our employees. We have a monthly budget in mind, but would like to hear from you. Our goal is to take what's currently there (shown upon request) and add the fun client side details of polished graphics with some server experience preferred to plug into for minimaps, etc. ALL ASSETS INCLUDED FOR DEV. What we want from you:- Examples of past PixiJS work or similar- Game examples you've worked on and what specifically you contributed (sci fi or .io is a plus!)- UI implantation in PixiJS (we will give you psd, can you bring them in game well, etc)- Mention 'blue bunny' in the early part of your message to show you read this- Mainly client side asks like graphics, explosions, UI, etc- Any references We've hired folks from Upwork before, we please don't waste our time and jump right into it if you think you're good fit! We look forward to hearing from you! More details, like Trello board, the game progress and anything else you would like upon request. We have a goal to hit before the end of the month and GDC. Thanks so much, hope you say hello! Please get in touch with me either on twitter (@TDJ) or email and ignore the dashes: d-y-la-n-@-t-he-dy-lan-jo-nes-.-co-m Thanks so much for reaching out, good luck either way!
  15. Hi all, Check out my web game "Move the Crates". Developed using pixi.js. Game play is similar to "Sokoban". Game is also optimized to work with gamepad. You can play the game here, Some screenshots: Here is the video of the game working in XBOX One browser,
  16. Hi! I'm using pixi.js to distort a sprite by manipulating it's vertexData (Like Photoshop's perspective transform). It's working! But I'm using a canvas texture as source, and as soon as I render the scene after updating the texture, the vertexData resets itself! I need to update the canvas because I'm rendering some animation on it. Some of the code I'm using: this.image = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas)); function render() { var self = this; this.image.texture.update(); //Everything works fine if I comment this line for (var i = 0; i < this.handlers.length; ++i) { //The handlers are some other sprites I'm using as control points this.image.vertexData[i * 2] = this.handlers[i].position.x; this.image.vertexData[(i * 2) + 1] = this.handlers[i].position.y; } this.renderer.render(this.stage); requestAnimationFrame(render); } render(); It there any way to prevent the vertexData to reset? Or is there a better way to achieve the same effect? Thank you so much!
  17. Hi everyone, I'm extremely excited to share my latest side project with you. I call it aape. It is my version of an Adobe Animate PixiJS exporter. Here are two demos of exported animations: How it works: The project is split into two parts. A JSFL script to export your current Animate timeline and a few JS classes to download and display the animation. Your animation is build as usual. The only difference being that you have to explicitly tell aape which part of the animation should be exported as Bitmap. This is done by selecting the MovieClip in your Animate library and changing it to a Graphics object. MovieClip labels and comments are also exported and can be used by executing the familiar gotoAndStop / gotoAndPlay methods. After building your scene you execute aape form the toolbar. The export starts with the currently open MovieClip as root element. A simple export generates three files. A PNG Atlas + JSON file containing image locations and a JSON object that describes the exported timeline (the library). The files can than be loaded and added to the aape.Timeline object. It's prototype is the PIXI.DisplayObject. So you can easily add it to your existing display list. The exporter currently doesn't parse vector graphics. The tool is not yet finished. I'm still working on the Animate user interface and export options as well as a proper documentation. I also haven't decided how I'm going to publish aape yet. What du you think? Is this workflow still relevant to you? I'd love to get your feedback. Cheers, David
  18. I can't for the life of me figure out how to work with enemy sprites that I've pooled into an array. I add them into the array by using .push() and take them out using .shift(), but once they're out and added to the stage, I have no way of selecting them, working with them, or giving them movement behaviors. Does anyone know how I can work with pooled sprites like this? Thanks.
  19. When I do a requestAnimationFrame it loops through once then it loses its scope. At the moment i don't want to use the arrow function because IE 11 doesn't support it (ref Does anyone know a way around this. Here is a sample code (function(){ var main =function(){ this.init(); } var p = main.prototype; p.init = function(){ this.stage = new PIXI.Container(); this.renderer = new PIXI.autoDetectRenderer(1024,768,{id:"stage"}); document.body.appendChild(this.renderer.view); this.updateStage(); } p.updateStage= function(){ requestAnimationFrame(this.updateStage); this.renderer.render(this.stage); } }()) As soon as it tries to render it calls this.renderer becomes undefined. I have tried binding the requestAnimationFrame which didn't work. So i console.log it out. the first time it logs i get main property with the correct property such as main.stage, main.renderer. The second time it returns me Window (in chrome). I am wondering if anyone knows how to keep the scope.
  20. Hi, For my website i created a neon effect with PixiJS v4 and i'm not happy with the results i was wondering if anyone could improve upon or has a better idea how create a neon effect which works across multiple desktop/mobile devices. The neon light is a simple transparent png image overlaid on top of static background image. It works for time been 'good enough' for desktop browsers, but i had to disabled it for iPad, etc. because of the slow performance combined with rain (pixi-particles) and fog (custom particle effect). Live version: Code: //PIXI var PIXI; var Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite, ParticleContainer = PIXI.particles.ParticleContainer, extras = PIXI.extras; var street = new Container(); var weatherType = new Container(); var renderer = new autoDetectRenderer(3600, 720, {antialias: false, transparent: true, resolution: 1}); document.getElementById('street').appendChild(renderer.view); //View = 'block'; renderer.autoResize = true; //Variables var neonSign, neonFilter, colorMatrix, count = 1; function animateScene() { //Animate neonSign neonSign.alpha = 0.1; count += 2; var bright = 2 + Math.sin(count); neonFilter.brightness(bright, false); requestAnimationFrame(animateScene); renderer.render(street); } function setup() { //Setup neonSign neonSign = new Sprite(resources['images/one-stop-copy-shop_glow.png'].texture); neonSign.width = 1200; neonSign.height = 300; neonSign.position.set(1200,0); colorMatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; neonFilter = new PIXI.filters.ColorMatrixFilter(); neonFilter.matrix = colorMatrix; neonSign.filters = [neonFilter]; //Add neonSign street.addChild(neonSign); //Start animateScene(); } //Setup loader .add('images/one-stop-copy-shop_glow.png') .load(setup);
  21. I want to create 5 possible animations text instances that cycle through every time an action happens (like a button press for example). I am thinking this needs to be an array that increases the x position with a for loop (i++). What is the syntax for an array of text objects that can be cycled through with a for loop? Thanks in advance. Im new at pixi this is what I have so far: //Aliases: this is shorthand var Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Create a Pixi stage and renderer and add the //renderer.view to the DOM var interactive = true; var stage = new Container(interactive), renderer = autoDetectRenderer(500, 500, { antialias: false, transparent: false, resolution: 1 }); document.body.appendChild(renderer.view); var btbTexture = PIXI.Texture.fromImage(''); var btn = new PIXI.Sprite(btbTexture); btn.scale.x = 0.5; btn.scale.y = 0.5; btn.anchor.x = 0.5; btn.anchor.y = 0.5; btn.position.x = 55; btn.position.y = 475; btn.interactive = true; btn.on('mousedown', () => console.log('mousedown')); stage.addChild(btn); //load an image and run the `setup` function when it's done loader //add images by: //.add("images/beerCup_logo.png") .add("") //creates a progress statement that will check to see if assets are loading .on("progress", loadProgressHandler) .load(ScrollingText, addButton); //.load(); //this function will check to see if all assets are loading to the stage. loader function loadProgressHandler(loader, resource) { //Display the file `url` currently being loaded console.log("loading: " + resource.url); //Display the precentage of files currently loaded console.log("progress: " + loader.progress + "%"); //If you gave your files names as the first argument //of the `add` method, you can access them like this //console.log("loading: " +; } //button: function addButton() { button = new sprite(resources[""].texture); stage.addChild(button); button.x = 15; button.y = 15; } //text scroll: function ScrollingText() { //Im thinking this is where the array of 5 possible text positions should be text = new PIXI.Text('This is a pixi text', { fontFamily: 'Oswald', fontSize: 24, fill: 0xff1010, align: 'center' }); stage.addChild(text); text.x = 500; text.y = 0; gameLoop(); } function gameLoop() { requestAnimationFrame(gameLoop); text.x -= 1; renderer.render(stage); }
  22. I feel embarrassed, but after doing a lot of research I can't seem to be able to implement this simple feature. Can anyone here who's familiar with pixi walk me through how I might accomplish this? Things I've tried... I'm trying to use .on('click', move) and then I have the move function right now set to just return the value of the pointer. I can't even get my code to return anything, let alone move the sprite. I've tried doing stage.on('click', move); and it just doesn't work. I get no errors in the console. nothing. It just doesn't work. After that, I tried creating a rectangle and using rectangle.on('click', move); I even fill in the rectangle with a color to make sure it's actually there. Nothing. my code is just unresponsive. No errors no nothing. The only time my code works is when I use the .on('click', move) on the actual sprite I'm trying to move! sprite.on('click', move). It will then return 'undefined' indicating that I at least got that far... I can provide my code if needed. But first I wanted to just check in and see what the best practice is for this, and if I'm just missing something elementary.
  23. Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.
  24. Hi everyone, I wanted to share our latest release, Vikings vs Monsters with you. It's a turn based RPG where you control a squad of vikings defending their village against invading monsters. You can find more info and try it out here: The game is available for non exclusive licensing. Feedback is greatly appreciated. Thanks!
  25. I'm having a load of trouble with Pixijs right now. I have a game with click and drag mechanics, and I'm wanting it so you can't drag the sprite outside of the bounds of the renderer. my renderer resizes dynamically. For the freaking life of me, I can't figure out how to grab the current size my renderer so I can use it in conditionals. I'm trying to use: "" but console.log returns it as undefined....wat? I tried using renderer.width, console.log returns that also as undefined. To make matters more hair rippingly frustrating, earlier today both of those pieces of code returned actual values. now none of them return anything. I can't even explain why that's happening. Any help with how to keep me from dragging my sprite off the stage, or figure out how I can obtain the renderer's size would be wonderful. Thanks so much. And sorry if I sound ranty.