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

  1. Hi, Here is my first game; Snake, HTML5 snake game with pixi.js. Play: Source: I hope this helps to learning game development with pixi.js. Happy coding..
  2. PearFiction Studios is looking for an experienced HTML5 Game Developer to work with our highly talented Montreal team. Develop the next generation of online casino games in our cool loft style office in the trendy Plateau Mont-Royal district. If you have a personality to handle responsibility and collaborate in a small team environment, we'd love to have you join PearFiction Studio's dev team. Candidates should have an interest in online, mobile, and social casino games. You will be responsible for: Participating in designing the front-end aspects of a game design including entertainment, pacing, features, and UI functionality. Designing, developing, and maintaining games in HTML5. Developing new front-end game development tools, features, or extending current ones. Creating and owning all design documentation and deliverables for our HTML5 game development toolset. Developing new casino games with our HTML5 game development toolset. Integrating the game graphics and visual effects. Integrating the game business requirements and features. Ensuring entertainment value to end users. Maintain and test HTML5 games and tools to ensure stability. Essential Experience: Technical degree or higher in computer science Minimum of three years of HTML5 (Canvas and JavaScript/Typescript) game development for mobile and desktop platforms. Experience with Pixi.js or JavaScript/CSS frameworks. Solid knowledge of Object Oriented Programming, MVC and other design principles. Experience working in agile and iterative environments. Familiarity with project tracking tools such as JIRA or Trello. Familiarity with Git and feature branching approach. Understanding web browser game development, with focus on mobile. A flair for game graphics programming, animations, effects, and optimization for best performance for online and mobile use. Desirable Experience: Experience developing slot machine front ends. Good understanding of casino games and real money gaming mathematics. Experience working with graphically performance-heavy web applications. Experience with client-server integrations and serialization techniques. Open to challenges of learning new languages, technologies, frameworks and approaches to development. Experience in game development projects (hobby or professional). Experience with other programming languages (C#, Java, / PHP / Python / C++, etc) is an asset. Genuinely wants to do a good job as a matter of pride in one’s work. Keen to learn and demonstrate ability. Self-motivated. Bilingual (French and English) is an asset. You can apply on our website here -> or via LinkedIn here ->
  3. Hello guys, I need you help. Do you know how to do a ribbon animation on PIXI.js? B I saw a lot of example on CSS3, but no example on pixi. Maybe I search in a wrong way. But I need 2D version, not a 3D Thank you for any feedback
  4. This is version 2 of my game Descensus from several years ago. It's a simple but difficult 2D physics game in which you have to guide the ball to the ground by swiping bars on screen, bouncing it around spinning saws and off moving terrain objects. There's a time limit to reach each 100m stage, and you can use terrain objects to your advantage as well. It was written using the physics library p2.js and the rendering library Pixi.js. I wrote in in TypeScript, bundled with Webpack, developed using Visual Studio Code. The Android version was packaged using the cloud build system Monaca, bundling the Crosswalk webview (hence the relatively large APK size). It doesn't use any PhoneGap APIs - the sound is all HTML5 Audio. I did most of the testing on desktop so I know that it works nicely with both mouse and touch. I might possibly put it online in the future. Play Store link: Video:
  5. Hey guys.. I'm hoping this is something I'm doing wrong, but basically.. when I'm creating a new SVG, it's having width, and height of 1 until 1 frame has passed and then it has actual dimensions. My guess is that the onTextureChange event is being triggered, however the new local transformation isn't happening until the next loop takes place. Here is an example of my code: var texture = PIXI.Texture.fromImage('mySVGPath.svg'); var sprite = new PIXI.Sprite(texture); console.log(sprite.width, sprite.height) // 1, 1 setTimeout(() => { console.log(sprite.width, sprite.height) // 500, 465 }, 0); Is there a way of solving this? Thanks!
  6. Hello all! I'm currently playing around with pixi.js and i have used to these things with normal canvas. I think this might have been asked many times, but how do i disable that image anti-aliasing from pixi.js? In normal canvas i could use context.imageSmoothingEnabled= false, but i think that this doesn't help here? - I have tried to set canvas css to image-rendering: pixelated; - i tried PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; but it doesn't help. - I also used antialising: disabled at the autoDetectRender -function. Anybody have any idea how to make it work? Or can you even disable it?
  7. Hello everyone, I am pretty new to the Pixi.js so I'm seeking advice from community on what is the best approach to have easy and efficient camera. Basically what I want is to have two main containers in the scene: The first one to represent the game world. Since world can be quite big, the camera is required here to show only small portion of the world. The second container to display all GUI elements, such as player healthbar, menus, scores etc. Since this container will always be the size of the viewport, no camera is required here. I looked at how camera is implemented in (which uses Pixi.js as a graphical engine) and it seems that all they do is just move "root" container in the direction opposite to camera movement (and scale it to represent camera zoom in/out). While this approach works, it has two issues: It seems quite inefficient to move root container, since this will cause recalculation of transfom of all the objects in the scene tree. I would also like to be able to "flip" the Y-axis of default Pixi's coordinate system (i.e. I want Y-axis to be pointing up like in conventional Cartesian coordinate system, not down). Unfortunately, I don't see an easy way to achieve this with this camera approach. I think the better way would be to modify projection matrix before rendering "world" container, i.e.: set projection matrix according to current camera position / zoom render world container set projection matrix for rendering GUI container render GUI Does this look like a sensible approach? How can I achieve something like this with Pixi? Thanks for advice!
  8. 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. Hello everyone. I also opened an issue on github, you can check via here: Tested on versions `4.x.x` including latest `4.3.3`, I face this issue with `mouseover` and `mouseout `events in the following cases. 1) I have a rectangle (graphic object) that moves back and forth through the canvas. When I place my cursor in the middle of the canvas, as the shape moves and crosses over my cursor, `mouseover` and `mouseout` events fail to register in a random pattern. 2) For the second case, the rectangle doesn't move, but this time I cross over the shape with my mouse. As I move my mouse fast , `mouseover `and `mouseout` events fail to register in a random pattern as well. Here you can check the code JsBin Below I also share javascript file /* * Mouse events randomly fail to register when delta is large or * rectangle width is small, or there's no animation but you * simply move your mouse fast over the rectangle. * Tested on versions 4.x.x including latest 4.3.3 */ let delta = 15; const width = 40; const renderer = PIXI.autoDetectRenderer(400, 200) document.body.appendChild(renderer.view) const stage = new PIXI.Container() const rect = new PIXI.Graphics() rect.beginFill(0xf8d41f,1) rect.drawRect(0, 0, width, 200) rect.endFill() rect.interactive = true stage.addChild(rect) rect.on('mouseover', function() { console.log("1 mouseover") this.alpha = 0.2 }) rect.on('mouseout', function() { console.log("2 mouseout") this.alpha = 1 }) animate() function animate() { if (delta > 0 && rect.position.x >= 400) { delta = -delta } if (delta < 0 && rect.position.x <= 0) { delta = -delta } rect.x += delta renderer.render(stage) requestAnimationFrame(animate) }
  10. Hi! I'm using a drawn rectangle as a mask and I need to delete it after a tween, so I'm using onComplete and then in the callback function 'this.mask.clear()'. Seems to work fine in WebGL, but testing in some browsers using canvas it seems the mask is still there after the animation (other stuff in the function is working, just clear() not working on the mask). Is there any workaround for this? Or any other way to get rid of a mask? Any help is appreciated, thank you.
  11. Hi there, I just released my first game to A modern remake of classic 8-bit shootemup: Thrust (1986 C64, BBC Micro, Vectrex + many others) Features: - Music by Martin Keary (Titles) and Matt Gray (In Game & SFX) - External Joypad, Touch or Keyboard Controls. - Rock hard gameplay. - Speed Run and Endless Game Modes Tech: - Pixi.js and P2 Physics Engine, Framework Native versions of the full game on mobile platforms have been submitted to Itunes & Play store and should hopefully be available soon. Feedback Welcome.. Enjoy!
  12. function QuantizeFilter() { var vertexShader = null; //Doesn't actually quantize, just testing. var fragmentShader = [ 'precision mediump float;', '', 'varying vec2 vTextureCoord;', '', 'uniform vec4 dimensions;', //This is the variable. 'uniform vec3 palette[3];', 'uniform sampler2D uSampler;', '', 'void main(void)', '{', ' gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);', '}' ].join('\n'); var uniforms = { dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, palette: { type: '3fv', value: [ [255.0, 255.0, 255.0], [200.0, 200.0, 200.0], [0.0, 0.0, 0.0] ] } };, vertexShader, fragmentShader, uniforms ); } QuantizeFilter.prototype = Object.create(PIXI.AbstractFilter.prototype); QuantizeFilter.prototype.constructor = QuantizeFilter; Object.defineProperties(QuantizeFilter.prototype, { palette: { get: function() { return this.uniforms.palette.value; }, set: function(value) { this.uniforms.palette.value = value; } } }); Custom (test) filter for Pixi.js V4 I'd like to make the 'uniform vec3 palette[3];' array size, size to the 'palette' uniform input. So I could set palette to 256 or so arrays of colors and the uniform will size appropriately: 'uniform vec3 palette[256];' Hypothetically, I've thought of just making the string in javascript, and prepending it to the fragment shader text, but I don't know of a way to do that. Any help is appreciated, ty.
  13. Just wondering are there any solutions to ignore zero alpha channel on png images for mouse events. I make sprite from image with complex form and transparent area on it. And when I make it interactive mouse reacts on this transparent areas and it looks ugly. I know I can check pixels under mouse, and if there is no solution I'll have to do it. For example in flash there is library interactivePNG which do such things. Just wondering are there something similar for pixi.js?
  14. Hi! I work at Gamevy, a company which has been developing Instant Win products for the last few years. We've been lucky enough to see a lot of growth over the last year. At the moment, we'd like to increase our ability to deliver by extending the capacity we have. We have a large number of games in our backlog which have been designed on paper. We're looking for teams to work with us to bring these ideas to market. The teams we're looking for will need to comprise an artist who has illustration and animation skills, as well as front end developers. The server side work for these games - the engines that will run them in the background is already done. If you'd be interested in discussing further, please get in touch, either via Skype @ danrough or LinkedIn. Thanks! Dan.
  15. I have been trying to add a loading screen to my game. I know that I need to use .on('progress') and .once('complete') handlers. I run following code for loading an asset batch; assetManager.loadImageBatch = function(args, callback){ var ctr = 0; var toLoad = args.assets.length; args.assets.forEach(elm=>{ loadFile(, args.pathPrefix + elm.path); }) function loadFile(name, path){ assetManager.loader.add(name, path); assetManager.loader.once('complete', loadCallback); assetManager.loader.load(); } function loadCallback(){ console.log("loading"); ctr++; if(ctr == toLoad) callback(); } } it runs ok, loads all assets but as it has to log "loading" after loading each asset, it logs it after loading the whole asset batch. I tested it on both local and on my website. It results the same, nothing to do with download speed or whatsoever. I googled about loading screen usage on pixi but I wasn't able to find anything useful. Any thoughts?
  16. Hello, how can you change the orientation of the plane in p2.js? As for billiards. I read this article, but the answer did not find. I need plane to set the friction between the balls and the surface. Perhaps there are other variants? Thank you for your response.
  17. All good day from the start I want to apologize for my English. I need to create a pool and now I'm focused on the problem of when to make the play area. How best to do this? What I found - a rectangular area. I also need to know where this should be done in pixi.js or physical framework (like p2.js or physics.js) Thank you for your reply;)
  18. pixi.js

    Hey everybody, First of all big thanks to Pixi.js people for the awesome library. I have been using Pixi to develop a simple game and I stumble upon a small bug or I may be doing this wrong. So here is the problem, I got a sprite which contains child's sprites. And I want to destroy it but not the children since I was handling it manually because I need to save the state of each child sprite and then call destroy within them self. So before I calling destroy method I call a custom method on my object, deletingObject.onDestroy(); and then call deletingObject.destroy({ children: false, texture: false, baseTexture: false }); but this still destroys all the child within this object, I'm using as my Pixi version. and I have attached a screen shot from core developer tools. Am I doing the function call wrong or is there something missing. Thanks.
  19. I am working for a Wearable Computing and Augmented Reality Startup in Bremen, Germany: For improvements of our (PIXI.js powered) Web-Editor that configures our Augmented Reality solutions we are looking for a Web Application Developer (m/f) to join our team in Bremen (job permit for the EU is required). It says full-time in the job description but students looking for an internship are also very welcome! We are a team of people from all over the globe, so everyone in our team speaks English fluently but German is a big plus. The Job description (in German) is attached to this post. Please apply with your full resume including school and other certificates as well as code examples (e.g. github links) and references to . Feel free to ask me for further details on the job. 162810_Ubimax_Stellenauschreibung_WebApplicationDeveloper.pdf
  20. Coming from a WebGL background and new to PIXI.js, so I am used to sending multiple texture maps to a single Fragment Shader. I sense PIXI.js framework sends a default texture map to the fragment shader, but found little on sending multiple texture maps to a single Fragment Shader. Perhaps this is a restriction of the Framework. My question is how to send multiple texture maps to a single Fragment Shader. Is there a simple example of this? Appreciate any pointing in the right direction.
  21. Hello, I'm trying to get a coordinate system with (0,0) at the center of the screen. If I understood the API documentation correctly, adding a Container, applying PIXI.Container.setTransform(x, y, scaleX, scaleY, rotation, skewX, skeyY, pivotX, pivotY) and then adding Sprites as children to that Container should apply the transformation to all of them, right? So I created a Container, set x to width/2 and y to height/2, and added Sprites. Problem is, they still appear with (0,0) at top-left corner. Also modifying Container.x/y or Container.position.x/y would not add translations to children Sprites. Of course I could solve the problem by adding the width/2 and height/2 offsets to every sprite I create, but I really think display parameters should be seperated from the model data. What am I doing wrong? Is there a better solution?
  22. Hi all, I have a sprite sheet, I want to make many sprites from this sprite sheet. Here is my implementation: var ASSET_PATHS: string[] = [ "assets/roguelikeSheet_transparent.png", "assets/roguelikeChar_transparent.png" ] PIXI.loader.add(ASSET_PATHS).load(hasLoaded); var texture1 = PIXI.utils.TextureCache["assets/roguelikeSheet_transparent.png"]; var rect1 = new PIXI.Rectangle(0*17,0*17,16,16); texture1.frame = rect1; var sprite1 = new PIXI.Sprite(texture); var texture2 = PIXI.utils.TextureCache["assets/roguelikeSheet_transparent.png"]; var rect2 = new PIXI.Rectangle(3*17,5*17,16,16); texture2.frame = rect2; var sprite2 = new PIXI.Sprite(texture); The code above is me trying to load two different sections of the same sprite sheet and make sprites from those sections. What happens is that: texture2.frame = rect2; overwrites sprite1's texture, thus both sprites become rect2's section.
  23. I just wanted to share , a fast realtime server that we're working on which is a great fit for multiplayer gaming. Please find a tutorial for a multiplayer spaceshooter build with deepstream and pixi.js on Pluralsight/Hackguides here:
  24. Hey!, I have started learning Pixi.js. What I am trying to do is fill the whole screen, but preserve the pixel art style and ratio. I tried using renderer.resize() but it simply changes the viewport. Suppose I have a game at 320x240 resolution, and my screen is 1366x768. So my game should zoom 3x and new resolution should be 960x720. But the new screen should use nearest neighbor scaling
  25. I am a fairly seasoned developer (though relatively new to Pixi) and a professor of music. I've written a PixiJS 3 / ES6 application for my research -- it's a geometric visualization of some musical mathematics. It's got some rendering issues that I believe a seasoned PixiJS developer could help me sort out. I'm willing to pay an expert hourly rate for an appropriately-qualified expert, and I'm expecting this to be 20-40 hours of work, done as quickly as the hired developer would like (if you have a week between gigs, or if you want some extra nightly work for a month). This is a completely remote hire. If you're interested, please contact me with a resume, hourly rate, and, if available, a code sample or github account for me to review. Thanks, Richard