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 154 results

  1. Hello i'm new here I'm trying to upload my RPG Maker Game in my Webspace. On the PC everything works fine but when I start the Game on my Phone's Browser (I tried it on a Iphone 7 and on a Galaxy S6) I get the following error: child.removeStageReference is not a function. (In 'child.removeStageReference()'. 'child.removeStageReference' is undefined) Although when i start the game on my phone with Desktop-Mode it works! The only File i found using this function was Pixi,js, does someone know how to fix it? Greetings Balgros *sorry for my bad english pixi.js
  2. 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/
  3. 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: tothecapital.com We will be glad if you join us on Facebook www.facebook.com/tothecapital
  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 have put an online version (with sound disabled) at http://booleanoperations.com/descensus2 Play Store link: https://play.google.com/store/apps/details?id=com.booleanoperations.descensus2 Video: https://www.youtube.com/watch?v=9BWii8aokbQ
  5. I'm using Matter.js as my physics engine and Pixi as my renderer and under normal circumstances I've been able to get them to work smoothly. However, I'm trying to do something where all of the objects *except* the player character are scaled down to look like the character is now above them. The scaling works visually in Pixi, but I can't get the bodies from Matter.js to go with it, so there are these "ghost objects" that I can't see but if collide with them then the scaled down objects will be moved. Does anyone have any tips for how to resolve this? Let me know if I need to post a gif if that would help explain the problem.
  6. Morning! Just working on a bit of a debug console for my game, was just wondering if it was at all possible to switch the renderers at runtime? Have tried a couple of methods, but it just halts the code from executing I think (no error), but guessing it would be a nogo?
  7. Hi all, have continued working on my little game prototype. Nothing much there atm except an animated background (a few clouds moving, and a Spine based animated cactus). Ive just started dropping in some sprites for the HUD but getting an error from Interaction manager as soon as myButton.interactive=true and myButton.buttonMode = true are set. Cannot read property 'pointerType' of undefined at Interactionmanager.processPointerMove Any clues? Using 4.52 Production (non-min)
  8. Hi all I've just started on my second prototype for a game, only this time I'm wanting to sort out a few more of the core parts to it first. Audio being the one I'm tackling at the moment. I have a basic setup atm a loader and a few sprites to test. Upon finishing the load (including a music mp3 file) it runs a startGame function which then plays the audio track. I originally tried using the pixi-audio plugin from GitHub, but could not get this one to work at all (does it still work with PixiJsV4?) so moved onto Howler Howler does work, and plays the audio file once loaded. However after trying on my server it seems the loader doesn't fully load the mp3 file before continuing as it starts to play a good 5-10 seconds later after the startGame function has run. Do mp3 files work the same as any other file with the Pixi loader? or could this be an issue with howler that I have missed? Thanks for any advice!
  9. 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
  10. 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();
  11. 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(); }
  12. 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
  13. 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.
  14. 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?
  15. 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?
  16. 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.
  17. 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.
  18. 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
  19. 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
  20. 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..
  21. 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
  22. 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
  23. 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!
  24. 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?
  25. 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!