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


Forums

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

  1. 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: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  2. 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
  3. Okay, so a lot of the tutorials for Pixi.js seem a bit outdated. Most of the information out there still uses the old way of creating a new Pixi application by not using the newer 'convenient' Application class and setting up the renderer, container, and ticker by hand. A lot of the guides and articles also seem to be written before Pixi adopted and extended on a third-party loader module. Anyway, could someone explain to me how loading assets works, and what it means exactly? Normally, to start displaying some visuals with Pixi, you need to create a texture, and then a sprite from that texture, yes? Example: var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; var sprite = new PIXI.Sprite(texture); But then comes the 'loader' to the rescue. From my understanding, the Pixi loader is an object that simplifies handling assets because it creates the textures for you? For example: const loader = PIXI.loader .add('image1', '/assets/images/image1.png') Am I correct? I can't wrap my head around this. Here's my code altogether (it doesn't work by the way): const app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); const sprites = []; const loader = PIXI.loader .add('image1', 'assets/images/image1.png') .load(function(loader, resources) { sprites.image1 = new PIXI.Sprite(resources.image1.texture); init(); }); function init() { app.stage.addChild(sprites); } Do I need to render the stage in the 'init' function as well? Do I have to call 'load()' at some point? I'm so confused! However, this code works and I'm not sure why: const app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); document.body.appendChild(app.view); const loader = PIXI.loader; loader.add('image1', '/assets/images/image1.png'); loader.once('complete', function(loader, resources) { init(); }) loader.load(); function init() { let sprite1 = new PIXI.Sprite(PIXI.loader.resources.image1.texture); app.stage.addChild(sprite1); } EDIT Okay, it's making a lot more sense to me now. Here is the cleanest way I've come up with when using loader: const app = new PIXI.Application(800, 600); document.body.appendChild(app.view); const loader = PIXI.loader; loader .add('image1', '/assets/images/image1.png'); loader.on('complete', function(loader, resources) { let sprite1 = new PIXI.Sprite(loader.resources.image1.texture); app.stage.addChild(image1); }); loader.load();
  4. Hello, I begin to study Pixi.js and TypeScript. This log shows "undefined" on line 34: // Add the sprite to the stage console.log(this.stage); Code: /// <reference path="./libs/pixi.js.d.ts" /> class Game { private stage: PIXI.Container; private renderer: PIXI.WebGLRenderer | PIXI.CanvasRenderer; public constructor() { // Create the stage and renderer this.stage = new PIXI.Container(); this.renderer = PIXI.autoDetectRenderer(256, 256); document.body.appendChild(this.renderer.view); } public run() : void { // User Pixi's build-in `loader` object to load an image PIXI.loader .add("./images/chapter01/pixie96x48.png") .load(this.setup); } // This `setup` function will run when the image has loaded private setup(): void { // Create the sprite from the texture let pixie = new PIXI.Sprite( PIXI.loader.resources["./images/chapter01/pixie96x48.png"].texture ); // Add the sprite to the stage console.log(this.stage); this.stage.addChild(pixie); // Render the stage this.renderer.render(this.stage); } } window.onload = () => { let game = new Game(); game.run(); }
  5. Looking for feedback and suggestions. Really close to finishing. Sounds are still being worked on. The game isn't posted anywhere yet so there probably aren't many people playing. https://astroe.io
  6. Hello, I am using a DisplacementFilter to create a water ripple effect (the source & maps kindly borrowed from some other posts on this forum). I would like to be able to have the ripples 'fade' out, i.e. reduce the intensity/magnitude of the displacement. The only way I can think of doing this is by slowly reducing the intensity of the colour in the displacement map (reducing the saturation?), and replacing the filter with the new sprite. Is there a cleaner/easier way of achieving this? This is a snippet of the code I am using: http://jsfiddle.net/fgm6c2j5/3/ Thanks for your help.
  7. I think I have seen this question asked before, but I have not been able to implement a working solution in pixi.js v4.5.0. I am new to this, so bear with me.... I have a custom GLSL filter (the Game of Life, for now)-- I want to continually apply the filter to the sprite in a feedback loop. That is: Apply filter to sprite image Capture the result Set sprite image to result Apply filter to sprite image Loop I have attempted this with PIXI.Texture.fromCanvas(app.view) -> texture.update(), but that resulted in a black screen. I think using RenderTexture buffers with app.renderer.render may be on the right track, but I'm not sure how I should be applying them. I attempted to set my sprite.texture to a RenderTexture and it resulted in an error... I've also had various "Feedback loop detected" warnings in the console when I attempted to pass render textures as filter uniforms and read from those. Is there a way to set the sprite texture to the filtered sprite?
  8. I have this simple jsfiddle that displays the problem that I'm trying to solve. https://jsfiddle.net/4ke8k7hu/2/ It looks like the render texture get's cropped based on the position of the object passed to the renderTexture.render function. Is there a way around this?
  9. I'm looking to make a simple game using Pixi.js as a renderer and Matter.js for the physics. But I'm having a hard time wrapping my head around how to do that. Does anybody have some code or projects, using both pixi and matter, that I could take a look at? Any documentation/articles/videos are also welcome. Much appreciated.
  10. Hi, I'm looking at the documentation for Rope and Plane to try to see the difference and different use cases, but the use-case description and example construction are the same. It looks like the documentation for Plane is incorrect: the Plane constructor takes three arguments (texture, verticesX, verticesY), but the example passes only two arguments (texture, points). Shrug, I guess the Plane's use-case description and example were copied from Rope and never updated? So does anyone know when Plane is useful and maybe have a little example of creating one? Thanks in advance! EDIT: I guess the plane is for stretching a texture across a rectangle, but I still wonder how to convert the width and height from pixels to number of vertices.
  11. There's some mistakes in the documentation for PIXI.BaseRenderTexture. The first example at the top of the page ends with this line: "baseRenderTexture.render(sprite);" But PIXI.BaseRenderTexture doesn't have the method "render" so the example doesn't work. It should use the renderer.render method, like the second example. Also, at the end of the second example there's a comment that says "Renders to center of RenderTexture", but really it renders the sprite to the top left of the RenderTexture, since the sprite's transform is reset before rendering. It's the first example that renders the sprite to the center of the RenderTexture. This mistake shows up again in the documentation for PIXI.RenderTexture. And another mistake in BaseRenderTexture's documentation is in the first example, the constructor is called like this: "PIXI.BaseRenderTexture(renderer, 800, 600)". But renderer isn't a parameter of the constructor so this example doubly doesn't work. All in all a bit confusing, and I wouldn't want anyone else going in circles with this, so hopefully the documentation can get fixed. EDIT: *Yawn* hopefully this makes sense, I'm pretty tired but wanted to write this up before I go to bed and forget about it
  12. Hi all. I'm having a weird problem with rotating sprites. When I use Canvas rendering it's fine, but with WebGL rendering, the edges are jagged when I rotate the sprite. The sprite is created from a texture that is made with PIXI.Texture.fromCanvas. I used the HTML-Canvas API to make the simple rectangle. Here's a code pen project that explains better: code. And here are attached pictures of WebGL rendering and Canvas-fallback rendering. Any help fixing this would be greatly appreciated
  13. 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: https://play.google.com/store/apps/details?id=com.booleanoperations.descensus2 Video: https://www.youtube.com/watch?v=9BWii8aokbQ
  14. Hi, Here is my first game; Snake, HTML5 snake game with pixi.js. Play: http://oguzhaneroglu.com/games/snake/ Source: https://github.com/rohanrhu/snake I hope this helps to learning game development with pixi.js. Happy coding..
  15. 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 Phaser.io 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 -> http://pearfiction.com/careers/ or via LinkedIn here -> https://www.linkedin.com/jobs/cap/view/271185313/?pathWildcard=271185313&trk=job_capjs
  16. 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
  17. 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!
  18. 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?
  19. 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 Phaser.io (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!
  20. Hello everyone. I also opened an issue on github, you can check via here: https://github.com/pixijs/pixi.js/issues/3616 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) }
  21. 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.
  22. Hi there, I just released my first game to Itch.io: 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, Phaser.io Framework https://hayesmaker.itch.io/thrust-30-demo 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!
  23. 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] ] } }; PIXI.AbstractFilter.call(this, 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.
  24. 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?
  25. 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.