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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 141 results

  1. Hi, I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. Thanks in advance. var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); var element = document.getElementById('gameCanvas'); element.appendChild(app.view); var basicText = new PIXI.Text('Basic text in pixi'); basicText.x = 30; basicText.y = 90; app.stage.addChild(basicText); var style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], // gradient stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440 }); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); richText.x = 30; richText.y = 180; app.stage.addChild(richText);
  2. Greetings, I'm excited to share prototype of my 2D Tower Defense game Fold Wars. You can play it on itch now. It uses Pixi.js for rendering. Written in Typescript. Artwork in Inkscape. Music composition using VCVRack. It's still largely work-in-progress, but it's ready to play. There are 3 levels of three difficulty levels each. I write a devlog if you are interested in the development.
  3. modular PixiJS code with NodeJs

    The project I am working in is a multiplayer node.js game using to communicate where the renderer will be node.js. In order to correctly import my dependencies to the browser i am using browserify. I am trying to use the Entity-Component architecture to design my game and in doin g so wanted to have a "render component" on each game object. The problem is that I cannot use PIXI code on the server side of node.js This is something what i wanted my architecture to look like. A GameObject with multiple components (ex: PhysicsComponent, RenderComponent) in order to follow the Entity-Component architecture and design this game well. In my eyes the code should be able to run on the server and the client so that way the server can be authoritative in the state of the game. The problem is that PIXI code cannot be run on the server side of node.js because a window object is not defined. So here is the question : How am I intended to write gameObject rendering Code using Pixi.js? Is it supposed to be purely client side, and if so how am I supposed to handle GameObject specific rendering and such? I have been searching for several days and can find no answers. Any help would be greatly appreciated.
  4. Distorting textured objects - ideas required

    Hello, although I don't have enough spare time to create games at the moment, I'm playing a bit around with code to understand game mechanics. At the moment I'm teaching myself soft body dynamics. I can create an entity consisting just of cordinates (say a sphere) and play around with their shape, wobbling, squishing etc. But I'm at a loss at how to bind a texture to them that actually distorts according to the coord changes; preferrably in a way performant enough to use it in a game, and most preferrably done in Pixijs. Maybe I'll have to cut the texture into a mesh, bind UV coordinates to them and then use something like three.js to render it? I see that e.g. Dragonbone has some way to add meshes to characters - plus it can be used from pixi. Will it distort textures properly when I modify mesh coordinates, or is this information only used when exporting animations? What other approaches can you think of?
  5. Hi for some reason the renderer is stretching and squeezing to the canvas dimensions how do I prevent that and maintain the aspect ratio? See image below. The green square is suppose to be 50x50
  6. I've been working on this game for a while, and I'm finally doing a "technical release" of it. Since it's still in alpha, you may loose your progress on the next update. It's a retro multiplayer racing game, inspired by Rock'n Roll Racing. I'm using colyseus in the back-end, and pixi.js in the front-end. Play it now: You'll be redirected automatically to a server on EU or US. Controls: Arrow keys for movement 1 - Missile 2 - Drop mine 3 - Turbo / Nitro Hope you enjoy playing, any feedback is very welcome! Cheers! Screenshots below:
  7. Cardinal Run

    Hi, I am finishing this year with a NEW GAME! I am super glad - also was about time to stop working on it. You can play the game here I hope the game performance is alright. I noticed little lag here and there. Not sure if I can fix it. Game was developed using pixi.js, pixi particles and howler.js Game is available for non-exclusive license and API integration. Please contact me Gameplay video Some screenshots:
  8. Move stage pivot so that element is center

    Hey everyone, I want to center an element (in this case a graphics element) in the center of the screen. As you can see from my code, I am changing the position of the graphics and bringing it to the center of the screen. I don't want that. I want to actually move the pivot/position of the stage in such a manner that the graphics then looks like it is to the center of the screen. Also, would it be possible to save the original position of the stage?
  9. Zooming a graphic/container/element on click

    Hey everyone! I am trying to achieve a zoom on an element using PIXI I have currently a graphics rectangle (see first image) It is the child of my stage which is the main container being rendered. My main container is as big as the browser screen. On clicking the graphics element I want the stage to zoom in in a way that I get this output (see second image) As you can see on the desired output I want the rectangle to take up the whole container. I am confused with what pivots do I choose and what new positioning do I set to achieve this and till what point do I scale this?
  10. PIXI es6 & Babel

    Hi all After a few working projects in PIXI on es5, we're now starting to try and build a framework using es6 & babel. We have a boilerplate setup and have got the basics working, though it is slow. Because PIXI.js modules aren't decoupled, it takes a good 5 seconds+ on a simple project to recompile on each save & refresh the browser. I understand there is work possibly planned for V5 on this, but are there any workarounds in the meantime anyone has found to make the workflow a little quicker? Thanks in advance!
  11. Hi all, I made this short 2D Tower Defense game using Pixi.js. I would love to know what do you think. Libraries/Tools used: pixi.js, howler.js for audio, Inkscape for artwork, coding in Typescript
  12. Ui testting tool for pixijs

    Hi, I need some info on UI automation testing of pixijs webapp. We tried with Protractor & Katalon studio but couldn't able to detect the elements rendered by Pixijs . Any help on which automation tool works with pixijs will be helpful. Thanks, Deep
  13. I have sprite image but i don't have JSON filie and also no idea .about how to create json file .. is there any JSON generator available in the web ?
  14. Less lag in video panning - is my code so far I am wondering is there a way that would cause less lag when the mouse moves left, right, up, down, etc . Also is there a where that when the mouse goes out side of the canvas to keep on panning to show the whole video
  15. Hi all, i am trying to use Pixijs inside a vue instance and have encountered a strange issue. I know it might no be directly related to Pixi.js and you can jump to the tl;dr section for a question about how to update sprites locations, thanks, ------------------------------ All worked as expected when i used the particle container example from Pixi's official website.,js,console,output But now I want to have more control over the location of those sprites, like using an array to re-assign x, y, of each sprite. so I add a reference of pixi instance as vue's data element at line 12 and received an error It would throw a similar error if I want to pass a reference of ``maggots`` by using this.pixiInstance = maggots. jsbin seems to have added some protection or sandboxed this but it would caused a stackoverflow if you run this directly inside Chrome. So I am really desperate here on how to access ``maggots`` so I can loop thru and update all its elements... My last resort would be removing the canvas dom element and redraw it everytime i have to update the sprites data. i really don't want to do that Edit1: I am using the import below to import pixi, not sure if this would make any difference. =================TL;DR and Pure Pixijs question========================= Once you have initialized a Pixjs instance and have added sprites to it, what's the best way to access the instance so you can loop and update sprites' x, y values?
  16. Arcade Builder NG Launch

    Heya guys, Today I've decided to put Arcade Builder live on Newgrounds, hopefully I'll get some feedback and then can but this project to bed after any tweaks and then onto the next project. Arcade Builder is a business simulator which lets you build and manage your own games arcade. You can find the link here: If you have a Newgrounds account it'd be great to receive some votes/reviews. It is written in HTML5 and uses PixiJS to render. It took roughly 5 months in total with a lot of chill time in between (lurking here and playing games). I still plan on doing more with this game, but under a different title/theme next time, I'm thinking of adding crafting. For those who may be interested, here is my favourite video during development: I have created a playlist of all the footage I took during development: Thanks guys, have fun, Jam.
  17. I am a new user of PixiJS and wondering, how we can visualize weather data using PixiJS with or without Mapbox. Some sample demos (not PixiJS implementation) are and and there are couple of data sources (e.g., publicly available. Can anyone share any PixiJS implementation of weather data with brief explanation?
  18. My code has a setup function that runs at the start. Within that setup function I have the left and right arrow keys setting up movement like so: left = keyboard(37); = function(){ moveCharacterLeft(); }; It works fine. But then when I get a gameover my game runs a reset code and all variables are reset back to their former states and the setup function runs again. Well this means that the above function runs again as well, and this makes it so that each time I get a gameover and reset the game, the above function will run multiple times for each button press. So after one game over, if I hit the left key, the moveCharacterLeft() function will fire twice, and my character moves twice as far.. Three times for the next gameover.. ect.. Does anyone know how I can prevent this from happening? Admittedly I don't quite understand what's happening here..
  19. I am trying to visualize cascading effect of natural hazard/disaster on interdependent critical infrastructures applying WebGL. Suppose I have two critical infrastructures- Water Distribution system and power generation system with geolocation (latitude/longitude). Due to flooding or Hurricane, some substations of power generation system may be damaged and as a consequence, some substations of water distribution system may stopped working due to the power outage/blackout. So, is it possible to create an interactive visualization displaying effect of flood/hurricane on the substations of power system and damage effect of power substations to the water substations using PixiJS? Please note that I need to visualize both systems on geographic map and cascading effect/failure of substations over time (maybe, using slider to show cascading failure per minute/hour in a 24 hours day). Attached is an image showing both intradependency in a critical infrastructure and interdependency between 5 critical infrastructures. Any related PixiJS example of web visualization with real/fake data will be highly appreciated. Thank you.
  20. Hi all, I'd like to show my first game that I've developed called Matchy Matchy. I've made a couple of small demo's in the past, but never a fully finished game. I consider this game at version 1.0, but can think of many many improvements. The game is a one versus one match-3 game. You can play against other players or against the computer in a series of levels that gradually get harder. I would love some feedback! Nick (
  21. Inverse Masking

    Hey guys, I've trawled through google, here and the github repo but couldn't find a good way to perform an inverse mask. I need the mask to be applied on every rAF, so generating a new canvas and re-uploading the texture to the GPU and rendering is going to be to expensive I think. I've read that this is very easy to do in WebGL, but I would like to keep canvas fallback if possible. I already have a mask texture that I want to apply, but obviously it's being used as a normal mask. Are there any good performant solutions for this?
  22. Hi Guys, The issue I'm having at the moment is with zooming and pinching a web page (pinching on laptops) with my game in it - causes the game to zoom in and therefore change the UI of the game. A demo can be seen here of the issue, simply zoom/scroll to see various bugs appear throughout the game once a new game has started: I can't seem to find just one solution for disabling zoom and pinch altogether on all browsers - am I missing something here? Any clues or tips, the renderer is PixiJS. Thanks, Jammy.
  23. Obviously this isn't optimal. Was wondering if maybe I'm doing something wrong? I have a standard game loop that's managed by requestAnimationFrame(gameLoop); and within my gameloop I have a function that moves each enemy like so: enemy.position.y += 6 I don't really know what to do to keep my movement speed from varying so dramatically across different devices. Another issue that might be related, over time my sprite movement becomes gradually faster and choppier. This is the part that really really bothers me. Any help or insight would be deeply appreciated.
  24. Get all sprites?

    Hi guys, Not too sure where to find this or if it's possible but is there a way to get an array or object containing all the sprites that are currently in the renderer? Thanks, Jammy.