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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 202 results

  1. Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom
  2. We are a team of developers and designer working on a multiplayer dungeon crawler that’s procedurally generated on the blockchain, inspired by classic text and grid based MUDs. We are looking for a pixiJS developer to work with us to launch the dungeon. Preferably this developer should be experienced with pixijs v5. Otherwise, experience with flash/actionscript would be helpful. Our team is based in New York and the UK, and we are looking for someone to work remotely with us. PM me if you are interested or reply here if you have any questions!
  3. Hi all! I made a simple platformer, a hobby project done in free time. It is a HTML5 port of a game I made in Pascal as a teenager over 20 years ago. I improved a lot of things in terms of game mechanics, level design, etc. but the graphics are all original - hand drawn in MSPaint somewhere around 1998 I have a bit of nostalgia for this game and I can find some charm in its style but probably the reality is that it just looks ugly. I would like to get some feedback whether it's playable nevertheless, what can be improved and whether the graphics disqualifies it or not. The game has 4 levels, difficulty gradually increases with later levels. It works on both mobile and desktop - on desktop it's easier to play as you can use the keyboard to control rather than touch. I can beat it on a mobile phone without problems but I played it a lot during playtesting so got used to the controls. It's coded from scratch and uses pixijs for drawing. It's my first complete HTML5 game, I hope someone will enjoy it Here is the link:
  4. Hello, everyone! It's been a while since I don't touch this project, but I really wanted some feedback on this. I call it Ready 2 Dance and it is a dance rhythm game that uses PoseNet and PixiJS. Inspired by ParaPara Paradise, DDR, OSU and many others, it consists on hitting the circles in the right time following the song, which would be identical to the choreography from the youtube video. Not all songs include the video choreography right now. Since it is a dance rhythm game that uses posenet, it is required to have a webcam to play. I hope everything goes alright accessing the camera. 😅 And you would need to get up and dance. 😛 At this moment all the content is restricted to the dance charts I make, but I wanted to make this open to every logged in user. I'm afraid of the proportions that this is going to take in terms of billing (I'm not familiarized with that) and trolling. I thought about making this an electron app instead, so the users can make whatever they want and share with whoever they want, but I'm not really sure if this would be the best solution. I'm pretty new to programming in general, so I would be really happy to hear any advice and opinions that you have. 😁 Link to the game: Screenshots: I hope you like it! kikito
  5. i am trying to making zoomin images slideshow using pixijs on canvas from three images below this I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on. I am writing this code var pixiapp; var pixiloader = PIXI.Loader.shared; initpixiapp(); function initpixiapp() { pixiapp = new PIXI.Application({ width: 1280, height: 720 }); document.getElementById('canvas-container').appendChild(pixiapp.view); pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload); } function handleimagesload() { var imagessprites=[] var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture); var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture); var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture); imagessprites.push(img1) imagessprites.push(img2) imagessprites.push(img3); for (let index = 0; index < imagessprites.length; index++) { const element = imagessprites[index]; pixiapp.stage.addChild(element); // here will the the code to run zoom image to specific width and heigth and then move to next image, // here is my code, its only display zooming third image var ticker = new PIXI.Ticker(); ticker.add(() => { console.log('ticker called') element.width += 1; element.height += 1; if(element.width==1500) { ticker.stop() } }) ticker.start() } } One more things, how to display a box with text for three seconds before slideshow start.
  6. About the role A Game Developer at Roxor/Playsafe plays a crucial part of the creation of our awesome games. You will be working in a team that is responsible for taking the game from a concept stage to a finished game, optimized for both desktop and mobile devices. Not only will you write structured, testable quality code but you will also support our graphics and FX artists with implementing and coding art and graphical effects. We work in small agile teams consisting of a game designer, sound designer, producer, QA, artists and of course game developers. We believe that working closely in small team is crucial in creating the best games and it helps us in an agile way to take faster and better decisions. We develop our games in Javascript and TypeScript. They are rendered with the PIXI engine in WebGl and Canvas. To give the players the best experience, we put a lot of effort in optimizing our games for all platforms, both regarding file size and performance. We work in an ambitious, casual and fun atmosphere where we take a lot of pride in the games we create. Your Tasks ⦁ Participation in the design process for new features in the new games framework ⦁ Implementing new features in the new games framework ⦁ Implementing new games in games framework ⦁ Code Reviews of new features implemented by other developers Qualifications and Experience ⦁ +2 years of prior experience of software development as employee or contractor ⦁ Experience working with graphically performance-heavy web applications and games ⦁ Working experience with JavaScript, ActionScript, TypeScript, or similar ⦁ Working experience with any JavaScript based game engines, like PIXI, Phaser or similar ⦁ Interest in computer graphics programming, animations and effects ⦁ Good communication skills to explain technical requirements to the game designer and producer ⦁ Experience with client-server integrations ⦁ Understanding of good practice version control, artefact versioning, branching model ⦁ The ability to deliver in an agile, iterative environment where pace is high and all voices matter We also value ⦁ Experience with hardware-accelerated 3D techniques ⦁ Experience working with TDD and automated testing techniques ⦁ Any other creative skill, from sound design to 3D modeling Who are you and what do we offer We are seeking a social, positive, and driven person who can help us create the best video slots on the market. You are a team player with strong initiative and self-motivation thriving in a small team environment where the route from idea to implementation is very short. You should be collaborative, fun to work with and be able to augment our design process with great animation instincts and a firm grasp of the best tools for building cross platform experiences for the modern web. If your interested in the position please feel free to notify me at We are based in Cape Town, South Africa. GameDeveloperRole - Job Description.docx
  7. hi friends. I want dispatch a custom event for one sprite. for example: when click on bunny sprite. dispatch an event that name is : sayHello. i wirte this code: but when run and click on bunny show this error: but if i change this code: this.dispatchEvent to -> document.boy.dispatchEvent work successfuly. but i Want dispatch to my sprite or container . can do it????
  8. Hi there, I have a collection of sprite animations happening inside of a PIXI Container. I need to take a rectangle section of this animation and display it inside of a Spine animation using a Mesh. (this seems to be working all fine) However, I am able to do get the full contents of the container and place it into my Spine animation no problem using renderTexture, but I only need a small section of its contents. I thought I would be able to do something like this.... var party = PIXI.Container(); // Sprites of people in a party inside of here var texture = PIXI.RenderTexture.create(party.width, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim texture._updateUvs(); // on rAF update the mesh texture and apply to the mesh renderer(party,texture); slot.attachment.region.texture = texture; slot.attachment.updateUVs(); Here it looks like it should only use a section from 100 pixels in from the left and only take a 100 pixel wide slice, but it doesn't. I also thought I would create the renderTexture at the size of the slice I need.... var texture = PIXI.RenderTexture.create(100, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim But this just takes a 100 pixel section at the left most of my container. Maybe I could apply a mask to the section I need and create a texture from that or something?
  9. Hi all ! I'm currently working on a bomberman-like game, full of traps and special items and up to 10 players (objective: 100 players) The game is currently under development and we have a lot of plans to enhance it: new mods and modding engine new heroes, skins, biomes manage your account, friends, group host your local games and much more... (made with pixi.js, react & howler for the frontend) Play right now here: Hope you'll enjoy and feel free to discuss
  10. Hi every one... I am very new to pixijs... need do a userlogin screen, I am unable to figure out how to add a textbox to canvas .. please let me know how can I do that.. and I want present the table of data.. in the next screen as well so let me now how to add a table as like object to the canvas.. Thank you for your time..
  11. Hi all, I'm on the lookout for anyone who would be interested in collaborating on the development of a few PixiJS based games. I've done a fair few now myself but I'm quite pushed for time, I'm more of a designer than a developer & have a small backlog of projects that could do with a helping hand. Ideally I'm looking for someone more on the development side with at least basic graphic design skills needed to take the assets from a psd into the game (prepping atlases, 9 sliced sprites etc), but if you can do more than that all the better! Going forward the games will mainly be built in es6/PixiJSV5, with animation through GSAP & Spine. Example of the type of project we'd be working on below... If you're interested, feel free to drop me a PM and can go over in more detail and discuss rates etc, Cheers!
  12. NMN

    Brush Blur

    Hi All, I'm trying to implement a paint brush blur filter similar to the brush displacement filter here: . Could anyone point me in the right direction? Thanks!
  13. Harryk89

    physics library

    Please tell me, what is the best physics library for Pixi.js or commonly used and do they all work with pixi.js v5?
  14. Unfold is looking for a “Senior Game Developer HTML5 / TypeScript” in Berlin. Unfold is a German game developing studio. We develop video slot games for the free-to-play & the online gambling market on multiple platforms. Unfold started as a pioneer in social betting. Founded in 2009, we were backed by premier venture capital firms Earlybird and Target Partners. In 2012 we became part of a leading family-owned European casino group. We are now a wholly owned subsidiary of Bally Wulff, one of Germany’s leading manufacturers of electronic gaming machines. Unfold is based in Berlin, Germany, Europe’s gaming hub. To lead the growth of our gaming portfolio we are looking for a “Senior Game Developer HTML5 / TypeScript”. Your Profile: Solid knowledge in TypeScript / JavaScript (OOP), HTML5 & CSS3 You enjoy an object oriented programming style You have working experience with PixiJS Understanding of separation of concerns, design patterns & testing Ability to deliver high-quality, clean code using agile, test driven development practices Aptitude for learning and sharing knowledge / skills, pair programming & code reviews You are a teamplayer and reliable English full professional proficiency, German is a big plus We are looking for someone who is a very versatile professional with a creative mindset, good logical and analytical capabilities, you think from a user’s point of view and you have the ability to prioritize & multi-task. Technologies & Tools we are using: TypeScript, JavaScript, PixiJS, Webpack, Node.js, Selenium, Maven, Jenkins, Git & IntelliJ. This is an excerpt – we adapt our technologies to the conditions and choose others if we think they are more useful. Your Benefits: Build state-of-the-art tech products Be part of a small but growing, highly skilled team developing the next generation of online games No hierarchies and quick decision making processes The best development hardware & software money can buy Attending conferences & trainings 28 days of vacation, very flexible and family friendly working conditions, home office days and no over hours Comfortable working place with free fruit & drinks Cookie driven development and team events How to apply? Please call or send your application to: jobs (at) Unfold Gaming Digital GmbH Ramona Döbrich (HR) Colditzstr. 34/36 12099 Berlin, Germany It would be nice if you could add a link to Github/BitBucket and LinkedIn in your CV. Tel.: +49 (0)30 417 212 80 Fax: +49 (0)30 417 212 81
  15. Hello, I am a Korean developer. I play animation through pixi-spine. The problem is, I want to turn off anti-aliasing because my spine is low resolution When you false antilias to an option on canvas, other objects look like pixels, but spines don't. What should I do? Even if the translation is unstable, please understand.
  16. Hello i have some problems with pixi-layers.js. I want to move some sprites to top. I use pixi.v4 with this script: Error message i get: pixi-layers.js:705 Uncaught TypeError: Cannot read property 'prototype' of undefined at pixi-layers.js:705 at pixi-layers.js:744 I add pixi layers in index.html this way: <script src="/"></script> <script src=""></script> <script src="src/pixi-layers.js"></script> <script src="src/keyboard.js"></script> <script src="src/client.js"></script> What did i do wrong? Thank you for your time.
  17. Solve an endless number of puzzles! The number of levels is not limited, new ones are generated by the algorithm Excellent graphics, dynamically changing backgrounds 6 difficulty levels It works on all devices running IOS and Android High-quality music and sounds Many hours of gameplay Tips for each level LINK: For licensing to write to the email:
  18. I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo:
  19. Hi, I'm hoping you can share some ideas with me! I'm making web based games with Pixi.js and I'm having a bit of a hard time working with the graphics design team (this is not a developers vs designers issue!). I'm trying to find the best workflow that might help us both do our jobs faster, but I can't seem to find the right tool for it! The designers sketch and build the app in Photoshop, and I work in Typescript with Pixi. So... what we've tried so far was: they sketch up in PS and then generate all assets with TexturePacker, leaving me with a json file which I can easily import into my game. The downside of this is that I have to position every asset and create every container manually (or rather using a config file, but still that's kinda manual work). Our second attempt was that they sketch up in PS, then export that to Adobe Animate, and using the PixiAnimate plugin, they then create the files for me to use. This has improved our workflow, because I don't need to position anything nor create the containers, but there are still some flaws as they are not able to test interactive elements (they can't see how a button actually reacts unless I implement it), and I would love to not depend on Animate which seems fairly deprecated nowadays, and on an external plugin which is out of our control. Plus, designers (at least ours) do not think as programmers, and they don't make variable names easy for us. PixiAnimate creates objects using the instance name they put on Animate, but they don't follow any guidelines. If they have four items of the same group, they call them "item_1", "item2", "this_is_the_third_item", and "last_one". If there's a tool that can validate this prior to exporting (setting some kind of rules, like prefixes for elements), that would be awesome. So yeah, I'm asking for a magical tool. I know it doesn't exists, and I know some adjustments are necessary on both sides, but I'd love to hear from you guys, how do you work with your graphics team, what do they use and how do they deliver the assets to you! Thanks!
  20. Hi. I'm not a html5 game developer but Front-end developer trying to draw a line chart with pixi.js. So, my question is not about the html5 game but just about how can I use pixi.js correctly. I was recommended this forum from pixi.js official site. Anyway, the problem is chrome browser stopped after about 2 minutes later ticker started. See this code ( It's a simple code for a line chart. 1. Add a basic PIXI container 2. Draw the first line with 4 dots. 3. Add next line every second using PIXI ticker and Change line x position. It works nicely at the moment But about 2 minutes later, the browser is crashed. I don't know why and how can I fix it. Help me!
  21. Hi, I was trying to understand how to use Pixi-spine library that adds support for spine animations for PixiJS . But I did not find anything useful on the internet. Can anyone help me understand it?
  22. I want to restrict the size of the applied filter on canvas. In the below codepen i have set the displacement filter and moving it according mouse position. But the problem is it's covering entire background. I want to fix the size of the filter. I'm new the Pixijs and any help is appreciated.
  23. Hi all.I am a beginner of pixi.js, and using PIXI.Graphics to create a circular progress bar that will move over time, the effect is like the one below: More specifically, the circular progress bar moves over time. So, the graphics is modified constantly, this caused a very serious performance problem and even caused the iOS system to crash. My question is what should I do to implement such a circular progress bar in pixijs? My English is poor, thank you for reading.
  24. I have following tween I used to move an image in my game coords = { x: 0, y: 0 }; tween = new TWEEN.Tween(coords) .to({ x: 700, y: 200 }, 2000) .onUpdate(function() { cardImg.position.set(coords.x, coords.y); }) .onComplete(function(){ redoTween(); }) .start(); function redoTween() { cardImg.position.set(0, 0); tween._valuesStart = { x: 0, y: 0 }; tween._valuesEnd= { x: 700, y: 0 }; tween.start(); } This works as expected. I wanted to re-use the same tween to move the image to a different location. I would like to update "coords" to new location and; call say; tween.start(); Is there a way to do this? What I noticed was I can only use the it once.
  25. No matter what I try or how I implement things, I keep getting some jittery scroll movement. I was using the <canvas> tag before this, without PixiJS and it was a lot of jittery movement. Just one drawImage call per rAF-call would take far more than 16,6 ms. I used the <canvas> for drawing frames. But I also used the transform CSS property for instance. With and without CSS transitions. But currently I'm using PixiJS with a RenderTexture and the scrolling still seems somewhat jittery to me, though maybe less jittery. I'm not drawing vector graphics. I'm drawing images (PNG files actually). When an image has loaded I add it to a somewhat large RenderTexture (4096x4096). Because width of the images don't exceed 1024 pixels, I now store the images inside four columns of 1024 by 4096 pixels. I then have a sprite for which I create a Texture (which I recently found out to be just a reference to a BaseTexture combined with a certain frame). Each time I scroll I create a new Texture pointing to the same RenderTexture but using a different frame. Though at a certain point it seems I need two sprites with textures both pointing to the same RenderTexture but with different frames. Because, let's say, when the first frame starts at 4000 and I need about 800 pixels from the image (e.g. 800 could be window height or screen height) I need to have a frame pointing at the last 96 pixels of the first column within the RenderTexture and a frame which points to the other column, getting the remaining 704 pixels. Should this be a proper way of handling this? Or is there a faster way to handle this somehow? Maybe I could make sure to make the height of the columns within the RenderTexture are dividable by the current window height. Though then it would mean some column height would go unused (but then this would probably be true for all columns, so maybe not such of a big deal). And this reordering would then need to happen each time a resize occurs. I guess a large screen size (regarding height) would not work very well with how I'm handling this now? Any advice would be much appreciated By the way, I'm also using a small easing function which I call via setTimeout when there is movement. But the actual drawing takes place currently in the ticker function. It just calculates current scrolling speed, does not draw anything.