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
    • 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 212 results

  1. Gagiopapinni

    renderCanvas() vs renderer.render()

    Could you please explain me the difference between rendering through renderCanvas() and through renderer.render() There is nothing about specific differences on the doc's page , so it seemed they must work in the same way , but in fact they does not for example ... var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,}); document.body.appendChild(r.view); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines'); richText.x = 30; richText.y = 180; //r.render(richText); // - working as expected, the text stands at 30,180 richText.renderCanvas(r) // -- not really the same, the text stands at 0,0 after this I started wondering , maybe it works in this way because the text has no parent object ... ( because as said in the docs the X and Y are relative coordinates to the parent ) and then I tryed this : var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,}); document.body.appendChild(r.view); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines'); richText.x = 30; richText.y = 180; var stage = new PIXI.Container(); stage.addChild(richText); //r.render(stage); // - working as expected, the text stands at 30,180 stage.renderCanvas(r) // again, the text stands at 0,0 the result is the same , nothing works as expected
  2. ijonatron

    Entity interpolation with Pixi.js

    Hey everyone! Just joined this forum hoping someone could help me out here... I'm working on a test project to try out some of these concepts. I'm currently working on entity interpolation and I think I'm pretty close to it working, but the moving objects still seem jittery. On the back end I'm sending snapshots of player positions every 50ms... // send snapshots setInterval(() => { const snapshot = { timestamp:, players }; ws.clients.forEach(client => { client.send(pack('snapshot', snapshot)); }); }, 50); These snapshots are being received on the client like so... const sync = snapshot => { // keep the last 2 snapshots if (snapshots.length === 2) snapshots.shift(); snapshots.push(snapshot); snapshot.players.forEach(player => { let manager = playerManagers.find(mngr => ===; ... manager.updateRemote(player); }); t = 0; }; The manager here is a class instance associated with each player that controls the sprite's position, rotation, etc. Here is that updateRemote method... updateRemote = player => { this.local = this.remote ? this.remote : player; this.remote = player; } What this does is set the manager's local and remote properties. These are the states that the sprite should interpolate between. Then here is the Pixi.js ticker... let t = 0; ticker.add(() => { t += ticker.deltaTime; let lag = 50; if (snapshots.length >= 2) lag = snapshots[1].timestamp - snapshots[0].timestamp; playerManagers.forEach(manager => manager.interpolate(t / lag)); }); Here I am increasing t by the ticker's deltaTime and dividing that by the time between the two snapshots (or the intended time if there aren't two snapshots available). Remember above that t is reset each time a snapshot is received. This means when a snapshot was just received, t will be 0 and start counting up. When another snapshot is received, t will be at 50 (or whatever the real lag is) then be set back to 0 and repeat. In other words, t / lag will be between 0 and 1 for the lerp function... Here is that interpolate method... interpolate = delta => { this.sprite.position.set( lerp(this.local.pos.x, this.remote.pos.x, delta), lerp(this.local.pos.y, this.remote.pos.y, delta), ); this.sprite.rotation = lerp(this.local.direction, this.remote.direction, delta); } And the lerp function is the second formula here. AFAIK this should give me smooth movement between the past snapshot (local) and the new one (remote), but movement still seems choppy and jittery. I'm fairly new to interpolation, prediction, and other game networking concepts so hopefully someone can help me out here. Please let me know if any more information is needed.
  3. Easy

    To The Capital II

    To The Capital II - is a game in the genre jRPG with classic turn-based battles in which you have to travel together with four heroes visiting many cities, dungeons, mysterious places and fight with various bosses. Storyline Prior to the overthrow of the current authorities and getting to the capital, Louis gets an assignment from the king to find fugitive participants in the failed coup. Together with Ralph, Bernard and Amelia joined by order of the command, they go on a journey through mysterious forests, snow-capped mountains and hot deserts. Official site: We will be glad if you join us on Facebook
  4. I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels. I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done: Create a texture from video Create a sprite from image Add the image sprite to a container Set 'mask' property of container to be the video texture This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening. I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient. Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best watercolor-test.html
  5. batman


    Guys, hi, spent couple hours to figure out how to combine local and global coordinates. The issue: I have a stage, there is a gameboadr on this stage, the gameboard holds many elements with coordinates related to this gameboard. Then I add element on game stage. It is animated effect. So when I click on element on the gameboard. It passes itself as parametr to that animation and trigger it. But, animation is displayed in a wrong place (it just need to be on the stage, not on gameboard). What I try to do is simply display that effect on top of the element. The gameboard scale is 0.5, the element is scaled to 0.9, the effect scale is 1, the anchor for all objects is 0.5. The relation as follows: app.view (pixi app/canvas)->> Game.stage (where effect is placed) ->>Gameboard->> Elements I did as follows: Animations.rocketRun = function (elementOnBoard) { let frames = []; for (let i = 0; i < 25; ++i) { frames.push(PIXI.Texture.fromImage(picture_' + i + '.png')); } let anim = new PIXI.extras.AnimatedSprite(frames); //anim is my effect should be put on top of elementOnBoard,so actually cover it, only of X axis //anim.x = -319 + CELL_SIZE + SPACE; manual calculation, bad approach //anim.x = Game.stage.toGlobal(elementOnBoard.position).x;// wrong //anim.x = Game.stage.board.toGlobal(elementOnBoard.position).x;//wrong //anim.x = elementOnBoard.parent.toGlobal(elementOnBoard.position).x); //like on tutorial, but got Cannot read property 'toGlobal' of null, on tutorial is says: "And it will work even if you don't know what the cat's parent container currently is." anim.x = elementOnBoard.getGlobalPosition().x; // finally supposed to be the best one, but... Game.stage.addChild(anim); anim.anchor.set(0.5); anim.animationSpeed = 0.1; anim.loop = false;; }; P.S. I found a solution during making this post. The problem was, I think scale. I simply adjusted the coordinates calculation of my effect as below (multiply on scale, and deducted one of my constant - manual adjusment points). Indeed there is some inaccuracy, not sure why, but I adjusted by adding custom number. Could you explain why? Thanks, anim.x = elementOnBoard.getGlobalPosition().x * 0.5 - SPACE-19;
  6. is a fast paced, 2D multiplayer shooter inspired by games like Soldat, Unreal Tournament and N-game. Currently implemented game modes include Capture the Flag and Deathmatch. It uses the Box2D physics engine to enable convincing rigid body simulation. Players can make various moves including backflips, rolls, proning, running, flying and crouching. The game is still under active development and I'm willing to devote a great deal of time to finishing this project. I've made a test server available and you can join it by following these steps: - Go to - Play as Guest - Enter a username - Join CTF or Deathmatch. - Select primary and/or secondary weapon Press H to display table of controls. Decrease the size of the browser window in case it runs slow. I've noticed that some laptops and older systems have trouble maintaining adequate fps. It is currently not possible to register a username, but I've been making progress on an account and highscore system. The game server is currently located in Europe. I plan on running additional servers on other continents and for the site to serve as a gateway to the nearest game server when players join in order to minimize latency. Any thoughts, feedback or suggestions would be much appreciated! Thanks. Edit - 15-12-2017: New version! Sound effects have finally been added, weapons & items have been updated & tweaked, libraries have been updated and many improvements have been made along with numerous bugfixes. I'm currently finishing the implementation of the account system and I'm working on several new maps. More updates will follow soon!
  7. Harryk89

    Loader Json

    HI! which boot loader JSON should I use to boot now? And tell me the difference between JsonLoader, SpineLoader and PIXI.Loader
  8. Mat Groves

    Pixi.js Showcase

    Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: experiments:
  9. Harryk89

    Can't load json in spine

    When I load json in loader gives an error message PIXI.loader .add('spineCharacter', 'character_assets/red.json') .load(function (loader, resources) { var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData); self.container.addChild(animation); }); but if I use another method PIXI.loader .add('character_assets/red.json') .load(init); function init() { this.spin = new PIXI.spine.Spine(PIXI.loader.resources['character_assets/red.json'].spineData); this.container.addChild(this.spin); } There is no error, but the screen is just black and nothing is displayed
  10. Harryk89

    Connect Spine

    Hi, everebody! Tell me how to connect to pixi.js spine
  11. Hey guys, I'm experiencing some bad Ghosting. I can't take a screenshot because it's fine when ever I do it. But basically, when a sprite starts to move quickly (not uber fast), the trailing edge gets blurred. Any reasons why or how I could fix this? Thanks, Nick
  12. I feel like this is something that gets asked a lot, but after searching a bunch I haven't found anything definitive. I've loaded my animations into pixi via a spritesheet on the Pixi loader and I can place an animated sprite in the game easy enough. But say I have my main character perform a running animation, but then I need her to do a punching animation. Is there an easy way to achieve this on the same sprite seamlessly? The only way I can currently think of how to achieve this is to manually remove the animated sprite from the container, then manually add a new animated sprite in its place, which just seems cumbersome and inefficient at best.
  13. Mat Groves

    Welcome to the Pixi.js forum

    Hi everyone and welcome to the PIXI.js forum! First off, big thanks to @photonstorm for providing a place for people to talk Pixi, very kind of you sir! If you dont know what pixi.js is then let me give ya the low down: Pixi.js a fast, lightweight, open source 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It's the fastest HTML5 renderer in town! The idea behind pixi.js is that it can be used as the rendering component in your game engine (or any other type of project!) rather than as a game engine itself. Questions / bug reports / amazing feature ideas, or anything at all Pixi, then this is the place to discuss it! I will also be posting updates here as the engine grows and evolves. Pixi.js can be found here along with lots of examples: To find out more about Pixi and read our beginners tutorial, check out our blog over on Goodboy
  14. Guys, hello, Hope you are well. Could you advise why this: = newWidth + "px"; = newHeight + "px"; dynamically resize everyhting inside the app.renderer.view (our canvas), but this one, doesn`t: renderer.resize(newWidth, newHeight); I see how canvas expands/contacts but can`t get why background picture in first case follow the canvas but in second case stay the same. Thank you in advance,
  15. I'm looking to create an effect like this: With CSS and HTML5, it looks like he was able to somehow able to animate the change in opacity of his vector line. I'm not really sure how I would achieve this same effect with PixiJS. Any suggestions?
  16. Hi everyone, I have been working on another io game, and the first version was completed almost two weeks ago. Here is the link Features: The game is based on mining resources and creating a fleet with the points you collect. Ships auto shoot nearby resources or other ships. Players can buy ships with the resources. On the map, there are 4 health regen areas marked as green on the minimap. Development Notes: I used pixi.js and shockwave filter for explosions Howler.js for spatial audio Communication is in a binary format. The game also works on mobile devices, thanks to pixi.js. There is no client side prediction, everything is calculated on the server. The web server uses node.js for static content. The game server is written in C++ using uWebSockets. Here is a video on my twitter. I would like to hear what you think about this, Thanks!
  17. I created and did too much hard work to polish it, in hope that you like it : ) is a remake of classic battleship game who's origin is from world war 1. Arrange your ships and get into battle. Your main goal is to sink all 10 ships of enemy before he sink yours. First one to sink all ships will win the battle. Currently It's single player but I'm working on it's multiplayer version in which you'll be able to play with your friends or with any random person. I really need your precious feedback so please take some time to give it. THANKS FOR READING
  18. Hi all, I'm trying to help a developer I know find a talented individual (NOT a company, or current employee of any company) who can work remotely on HTML5 projects and has DEEP familiarity coding in Typescript. Familiarity with pixi.js and experience porting Flash games to H5 are also nice to have, but not necessarily required - the ability to learn quickly is more valuable than institutional knowledge for this team, but knowledge of Typescript (or other "formal" training with object-oriented coding) is absolutely essential for this role. I can't share the identity of the team, but it's been around for over 10 years now and boasts a solid portfolio of popular Casual games for the PC Download, mobile, and online/web markets. Please feel free to contact me with your resume/CV, sample games, or anything else that would make you a good candidate to consider for this position. Competitive compensation negotiable based on experience! Thanks! Joe Cain Mr. Shoes, Inc. (sorry, no website yet, but I promise this is legit and I won't waste your time!)
  19. Shadowstep33

    Pixi.js and Angular2

    Hey y'all, I made a package that I have been heavily using and honing in a game I'm working on. It allows you to use markup to create PIXI scenes. I'm hoping it'll help someone out there (and help make PIXI easier to use with angular2). Currently, it's not really optimized for performance as it's in its early stages (and I'm not that talented). If anyone has suggestions, feedback, or just wants to give it a whirl here is the github and npm info. It is being actively developed and maintained. FYI: on the roadmap is more support and out-of-the-box components that implements PIXI's built in features.
  20. MugenFTW

    Dynamically Adding sprites to Scene

    Hi there, I'm developing a simple shooting game where objects fall from the top of the canvas and you must click them before they hit the ground. I'm wanting to dynamically add sprites to the stage by a set Interval of time, starting at about 1500ms getting progressively faster. At the moment i'm using set Interval but can't seem to change the rate it runs my function. Is there a better way of adding sprites like this within the Game Loop? Thanks, AJ crispFallRate = 1500; //Start the game loop ticker.start(); addCrisps(crispFallRate); function addCrisps(interval) { addCrispsGlobal = setInterval(function() { if (state == play) { let createCrisp = new Sprite( resources["../img/fwbbq-crisp.png"].texture ); // Set initial crips position off canvas createCrisp.position.set(Math.random() * (app.renderer.width - createCrisp.width), -createCrisp.height); // Make sprite interactive createCrisp.interactive = true; // Bind click event createCrisp.on('click', clickedCrisp); gameScene.addChild(createCrisp); crisps.push(createCrisp); console.log("add crisp: " + interval); } else { return; } }, interval); } function clickedCrisp() { //Remove hit crisp this.visible = false; // Update score counter score += 100; scoreCounter.innerHTML = score; crispFallRate = crispFallRate - 100; }
  21. Daniel Parokonnyy

    pixi js documentation crashed???

    Then i am opening pixi js documentation and click on any links, buttons i got this: Why it happens?
  22. Hi everyone, I made a slot machine with three reels. And faced with "spinning reel problem". There are many articles on this issue. I think I am quite close to the solution but bumped into the wall with stopping TilingSprite on specific position. It is quite the same issue as below but with pixi.js. My evolution of "reels spinning" was the following (if not interested please go to point 4 with questions): I pushed my slot icons (sprites) into array, and displayed on three rectangles (reels, drawn with Pixi.Graphics.). On pushing spin button I shuffled the arrays and display them again. I got randomness dsiplaying but no spinning animation. So tried next step -> Try to make spinning effect with Tween.js. But as I treated every slot icon as single element, there were issues with spinning syncronizations and move directions. I believe with some advanced logic I can reach "spinning effect" here, but decided to find more simple solution -> Here I come of with combining all reel icons into one rectangle (each element is array element which contain icon sprite (like apple etc)): this.rectangleReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]); then, creating TilingSprite from this rectangle, and positioning it: this.tilingReelThree = PIXI.extras.TilingSprite.from(app.renderer.generateTexture(this.rectangleReelThree), this.rectangleReelThree.width, this.rectangleReelThree.height) this.tilingReelThree.position.set(363, 210); this.tilingReelThree.tilePosition.set(this.rectangleReelThree.position.x, this.rectangleReelThree.position.y); of course added it to the stage, then actually an issue. I came up with the following variables to control spinning: this.y_3; // this one to pass value for moving sprite on y axis this.distance_3; // number to count down from, as soon as it reaches 0, this.y_3 -- 0, and spinning stops. realization is the following: var position = function () { // this function is called from update() main animating function if (this.y == 0) { } else { this.tilingReelOne.tilePosition.y += this.y_1 * 12; this.tilingReelTwo.tilePosition.y += this.y_2 * 13; this.tilingReelThree.tilePosition.y += this.y_3 * 14; } this.distance_1--; this.distance_2--; this.distance_3--; if (this.distance_1 <= 0) this.y_1 = 0; if (this.distance_2 <= 0) this.y_2 = 0; if (this.distance_3 <= 0) this.y_3 = 0; }; //this one is trigerred on Spin button push var spin = function () { this.state = SLOT_STATE.SPINNING; this.y_1 = 1; this.y_2 = 1; this.y_3 = 1; this.distance_1 = 150; this.distance_2 = 220; this.distance_3 = 275; }; As result I got nice reels spin, but they stop on different positions (not in line, or fixed position). Also from this point I can`t check if reels combination meet neither win nor lose combintaion, as TilingSprite treated as one whole object. So here are the questions: Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks. How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite to predefined position on slot (like bottom, middle, top). Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance. I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here? Thank you in advance,
  23. Silone Online

    [WIP] Silone.Online MMO TBS

    Title: Silone.Online Genre: Online TBS with elements of tactical simulator and RPG. Platforms: Web Tech: ASP.NET, Angular, Pixi.js, SignalR, Howler. Developer: Combat Dices Team Hello, everyone. I am an indie game developer from Tomsk, Russia. In my spare time I develop my small project - Silone.Online. Periodically I accept help from friends and third-party developers, artists, musicians. Work is conducted from 2016. Now the game is implemented: - A global map with many provinces. - A unique system of character development, based on the work performed, and not on the levels. - Dialogues, usually ending with a quest. - Craft equipment and lots of resources. - Free trade between players. Direct game link here: Development Log in VK Page on Patreon Gameplay video
  24. m9dfukc

    Progressive texture upload

    Hi, I am building a media installation (with Pixi.js v4) which requires to load my textures while the system is running (ideally with a constant 60fps). Therefore I am using createImageBitmap in a Webworker instance and then transfer the ImageBitmap via transferable object to the "main thread". In the main thread I am using this approach to pass the ImageBitmap to Pixi's Texture Loader which then ultimately uploads the texture to the GPU via gl.textImage2d. This all works fine as long as I am using small textures but now I wanna load bigger textures (1920x6000px) and the texture upload starts to take a decent amount of time (70ms). Now to my question: Has anybody created a progressive texture upload for pixi.js similar to this threejs library? If not, what would be the best approach to tackle this? Basically I have similar requirements as the poster in this thread (again unfortunately wrong framework Thanks, Andreas p.s.: I've started to look into pixi.js v5 ... seems like createImageBitmap is coming, yeah!!!
  25. Hi, I am using pixi to display a texture that consists of alternating black and white rows of pixels. Unfortunately, pixi doesn't show these as black and white, but rather shows grey wave-like patterns that look like there is a lot of aliasing happening. That would make sense if the size of the texture did not match the size of the pixi view on which it is shown. Yet in both cases, width and height are 256. An alternative explanation for this could also be that pixi is attempting some form of pixel interpolation, yet my application is created with roundPixels=true and resolution=1. Where am I going wrong here? Thank you, ifru