Popular Content

Showing content with the highest reputation since 01/23/20 in all areas

  1. 3 points
    https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me
  2. 2 points

    Google GameSnacks

    https://www.gamesnacks.com "Bite-sized HTML5 games, accessible to everyone." https://www.gamasutra.com/view/news/358551/Google_wants_to_bring_HTML5_titles_to_lowend_devices_with_GameSnacks.php "Google has announced a new HTML5 platform called GameSnacks that's designed to help devs bring quick, casual games to any device."
  3. 2 points

    make jigsaw game with webpack

    tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  4. 2 points

    Use PIXI.Graphics as button

    Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...
  5. 2 points

    [Phaser 3] Rookie Bowman

    Game Link: https://www.kongregate.com/games/mapacarta/rookie-bowman Hi, I published my game on Kongregate yesterday. I hardly get feedbacks on there, so any feedback is appreciated. It is a platformer game with boss fights, collectible items, secret rooms etc...
  6. 1 point

    How do you keep the size below 3MB

    Not so long ago games needed to fit on a floppy disk ...so 3MB is a luxury imo To keep things small consider these easy wins. Javascript minification and dead-code removal. Lower bitrates for audio (combined with shorter duration and more imaginative looping). Pngquanting (8bit) bitmaps whenever possible. Keep every asset pristine, making every byte count. Example: https://b10b.com/grandprixhero/ (2.9MB total) And 3MB is by no means a hard-edged requirement, it's a recommendation based on FB's observations of their audience. If you can achieve it then the game may get more exposure and higher retention, but heavier games can still be viable too. What's most important for FB IG is virality and social connection.
  7. 1 point
    Jay Manley

    Tile Rendering Performance

    Hi all, I'm currently working on a new game which uses large tilesets and renders 9 Containers as map layers. Each map contains 24*24 tiles and each tile is 32px*32px. Currently I'm adding each tile from the tileset as a sprite individually (only if the tileIndex for that tile is > 0). So if I were to have a fully loaded map it would contain a total of 5,184 Sprites. I'm guessing that this is inefficient and I feel that I could combine the bottom two layers into a texture, as these are Ground Layers on the map. The player will walk over these anyway and they are unlikely to ever change until the player switches map and thus reducing the Sprite usage by 1,152 (2 layers worth). I've looked at the docs and online examples to see if there's anything that could be helpful here but have been unsuccessful in getting it to work as I'd expect it to. Please help.
  8. 1 point

    Tile Rendering Performance

    Welcome to the forums! Another tilemap thread. Please use search for this particular subforum on "tilemap" word. You can also search at https://github.com/pixijs/pixi.js/issues My latest explanation: https://github.com/pixijs/pixi-tilemap/issues/75#issuecomment-589615977 Tilemap is an advanced (not basic) , advanced algorithm that requires developer to write its own code and not just CTRL+C stuff from examples. PixiJS gives only low-level components that can be used with high-level algos people produce. When you write it, you actually feel like engine creator and not just like a person who uses one of existing solutions. I posted the same answer with different details like 30 times already. I hope you can forgive me that I cant give you compilation of all those threads Of course I would like someone to actually go through all that and compile article for PixiJS wiki ( https://github.com/pixijs/pixi.js/wiki ). We are waiting when that hero arrives.
  9. 1 point
    @PLAYERKILLERS test build with the fallback fix to Canvas is available, see here https://github.com/melonjs/melonJS/issues/982
  10. 1 point

    on events not working on sprite

    asset.interactive = true; Rather than your setInteractive property
  11. 1 point
  12. 1 point
    You can move whole container that contains eggs. You can create extra container if you want only part of eggs to be moved. Also the code your supplied has to work, I dont see whats wrong with it. Please post a demo on codepen,jsfiddle,codesandbox or pixi-playground.
  13. 1 point
    which edit do you have for texture packer, is it the one for the free texture packer we also added in 8.0 ? as for the gravity, yes, as part of the 8.0 version (major version increase, so some breaking changes) we revamped a bit the physic implementation to be closer to those physic engine out-there (with the will to be able to use one of them through a plugin) and as a consequence we now have a world global gravity settings that can then be lowered or amplified per physic object (instead of previously where each object gravity were managed separately), see here for the detailed changes : https://github.com/melonjs/melonJS/wiki/Upgrade-Guide#71x-to-800 but if you switch to 8.0, you can just disable the gravity by setting me.game.world.gravity to 0 (it's a vector) and you should be back to the previous 7.x behavior. last but not least as part of the WebGL testing I think we should then try to compile/link the built-in shaders and if failing then display a error message in the console and revert back to the canvas renderer, l'll look into it this week.
  14. 1 point
    I'll try to to reduce the number of lines, I never quite captured the idea of the chrome debugger. but before I do, your suggestion gave me an idea, I might try to examine the stage property.
  15. 1 point
    I expected the visual propety to be deleted, removed from the stage. the cube object exist on the board and when I normally use this command it works fine. later in the code I discard the object and I let the garbage collector "do it's thing": user_cubes[i].pop(); user_cubes[i].pop(); and thanks for the nice greeting into the forums, I am glad to have a place to consult about my PIXI development problems
  16. 1 point

    Offroad Mania — free keys for feedback

    I played the browser version and thought it was so good and pure I checked out the steam and the price I felt was also very fair so i had to buy it for myself to support the project. Would it be possible at all to play it on my iPad? Good luck with the recent launch!
  17. 1 point

    Pixi.js Showcase

    hi I have made a jigsaw game with pixi.js. hope you guys like it. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  18. 1 point
    easy, just call "baseTexture.update()" , it will chang all updateID's , and TextureSystem wlll see that texture was changed on bind: https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/BaseTexture.ts#L507 https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/TextureSystem.ts#L141 When you call "baseTexture.setSize()" it changes ID's too. Actually, if its only the format you've changed, you can just set "baseTexture.format" and use our regular BufferResource. As for bind problem you encountered, I think I need to see your demo to solve that.
  19. 1 point

    Pixi Filter and pixel size

    Hi, I'm trying to learn how to pass and use textures in PIXI.Filter. I have a game that uses a complex filter that takes multiple textures and behaves differently depending on the color of the pixel of each texture. It's too complicated to post here. The main problem I have is: I don't know how to measure the width / height of a pixel of the texture I'm passing inside my shader. Here I have a very simple filter that illustrates my issue: I want to create a filter that I pass the following "u" shape texture the filter uses that shape to generate a red drop shadow like this: The problem is the shader messes up and doesn't calculate properly the length of a pixel resulting on this: I was expecting to have a perfect stair going up, and I was expecting more steps on the stair (see algorithm below). Does anyone know what I'm doing wrong? Here's a link to a codepen illustrating the issue: https://codepen.io/alvaromartinlop/pen/abOvzxb?editors=0010 Here's the vertex shader: attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; uniform mat3 shadowMapMatrix; varying vec2 vShadowMapCoord; void main(void) { gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; vShadowMapCoord = (shadowMapMatrix * vec3(aTextureCoord, 1.0)).xy; } Here's the frag shader: precision highp float; varying vec2 vTextureCoord; uniform vec4 inputPixel; // Problem is here varying vec2 vShadowMapCoord; uniform sampler2D shadowMapTexture; void main() { vec4 shadowColor = vec4(1, 0, 0, 1); vec2 displacementCoord = vShadowMapCoord; vec4 shadowMapColor = texture2D(shadowMapTexture, vShadowMapCoord); vec4 finalColor; vec4 translateColor; vec2 translate = vec2(inputPixel.z,-inputPixel.w); for(int i= 0; i < 10; i++) { displacementCoord -= translate; translateColor = texture2D(shadowMapTexture, displacementCoord); if (translateColor.x > 0.0 && shadowMapColor.x == 0.0) { finalColor = shadowColor; break; } } gl_FragColor = finalColor; } Clearly the issue is with inputPixel, displacementCoord is not decrementing properly on each iteration in the for loop. Here's how I calculate the matrix for the texture public apply( filterManager: systems.FilterSystem, input: RenderTexture, output: RenderTexture, clearMode: boolean ): void { this.uniforms.shadowMapMatrix = filterManager.calculateSpriteMatrix( this._matrix, this._shadowMapSprite ); filterManager.applyFilter(this, input, output, clearMode); } So the question is. How do I properly calculate inputPixel so that I don't have the irregular staircase problem? Thanks.
  20. 1 point

    Pixi Filter and pixel size

    Ah nice, I totally missed it creates a 128x128 temporary texture, makes sense why inputPixel doesn't work. Yea I see what you are saying about uSampler, my game shader does use uSampler, I updated the codepen and verified your recommendations work, I updated the uniforms in my game shader and everything is good now. Also mesh shaders are great, found about them the other day. I love pixi js! Thanks!
  21. 1 point
    However, if you do manual binds and other stuff, please call "renderer.reset()" method so pixi knows that someone else worked with that context. Yes, we store current boundTexture and active location top optimize our webgl commands sequence. Its here: https://github.com/pixijs/pixi.js/blob/22c9cc00adaafbfd3a3f51dc74f3c9b4925686dd/packages/core/src/textures/TextureSystem.ts#L127
  22. 1 point
    Not complaining or pushing! If it gets done at all, it would make my day. I continue to be impressed by the evolution of the PIXI project. In the course of my own project, I have had to deal with a lot of maths of my own. The worst being implementing BOUNDED 2-finger panzoom up to my high standards of precision/quality or smoothly animating panning and zooming into another point in 2d space and back again. (Those small phone screens really stretch the imagination on how to make a largish game board usable) Of course, that is all 2d transformation stuff at which you guys are probably pros. I mention this to show my empathy for all the additional maths you guys have to deal with. I'll check out the resources to which you directed me. Thanks!
  23. 1 point
    Usually, its easier to change transforms on individual graphics. However, I do not know architecture of your code, and how do you prefer to write that kind of algorithms. Resetting graphics means pixi will have to call triangulation. It will also re-upload the vertex buffer in case figure has more than 100 vertices. I don't know how to explain it clearly, if you want you can take https://spector.babylonjs.com/ and capture one frame of your app, and see how many webgl commands that mean. Do what is easier for you to do from the coding perspective. It won't be hard to rewrite it later.
  24. 1 point

    background downloader for pixi.js

    There's an example here: https://github.com/kittykatattack/learningPixi#loading
  25. 1 point
    Oh i mean resource-loader v3 its this one: https://github.com/englercj/resource-loader/tree/8c27956c2ee68e5190e489d87a3e641df035116b
  26. 1 point


    Now I really recommend to look at your demo with spectorJS. However to capture the actual frame where ERASE happens you have to spam ERASE automatically, not just on click.
  27. 1 point


    Ivan, I just want to say thank you for your support. Thank you for guiding me to the right point. Yes, I was in the right direction, but something was missing very stupid from my side. So, if someone might need info, my problem was: The "overlay" texture was not the initial overlay image. It was indeed empty already. I needed to create a auxiliar sprite with the overlay texture, so I could create a RenderTexture object, and then position the auxiliar overlay sprite and then render this sprite on the render texture.
  28. 1 point

    Fastest way to do masking?

    OK, i recommend to test it for pixi 5.1.5 and 5.2.1
  29. 1 point
    Hi! I'm looking to start with Pixi, and i thought it would be fun to look if i can play around with the Slots from the Examples . Now when i look at the code provided i think i understand de part where the 5 reels are build and filled with 4 random symbols each. The part i don't understand is how it works when spinning the slots it looks like the reels are filled with infinite random symbols. Can someone explain to me in wat part of the code this effect is happening? Code can be found here: https://pixijs.io/examples/#/demos-advanced/slots.js Luffy
  30. 1 point
    IF you just created container, it does have width and height 0, because it doesnt have children. Width and Height are calculated properties, and yes, our main example gives a bad idea to people. It was the same way in Adobe Flash, and its completely different from you see in web development. If you dont understand how "pivot","width/height" work, try to make everything without them. consider that graphic coords are relative to center of the screen.
  31. 1 point
    Jonny Shaw

    Fastest way to do masking?

    Brilliant thanks Ivan, will take a look in detail first, it maybe something else that's causing the error on mobile and report back. Device currently testing on is a Samsung Note 8 (though will try others)
  32. 1 point

    Fastest way to do masking?

    Also you can use https://spector.babylonjs.com/ to capture one frame and see how exactly masks are handled. Again, I remind you - it might be different for pixi 5.1 and 5.2. There might be bugs.
  33. 1 point

    Fastest way to do masking?

    > Also seems that using graphics for masks on V5 doesn't work on mobile for me? In a project I'm working on at the moment I have a scene with 5 masks that are simple rectangular graphics and the height of the masks is tweened on occasion. It should work. If it doesnt work - make a demo and tell us a device that doesnt work with it. We made several changes in v5 releases regarding masks, and one of them - scissor masks for rects work inside the filters too. Its not easy to debug that stuff because we have not enough reports from people. For 5 objects there cant be benefits, 5 is a very small number. Pixi-heaven sprite masks weren't ported to v5 but i can port them provided you can actually test it and report back.
  34. 1 point
    Jonny Shaw

    Fastest way to do masking?

    Sorry to bump this but just wondered if this had improved significantly with V5, or an alternative approach is recommended? I noticed that masks seem to act slightly differently in V5 someway in their stacking order. A system I had set up in V4 for instance with a Kawase blur filter on a masked container that animated. The filter would also blur the mask (which was the intended idea) but with V5 only the contents of the container were masked. Also seems that using graphics for masks on V5 doesn't work on mobile for me? In a project I'm working on at the moment I have a scene with 5 masks that are simple rectangular graphics and the height of the masks is tweened on occasion. Because the graphics arent working on mobile two approaches I thought of... 1. Rendering all the graphics to a single texture on the fly and having that texture used as a single sprite mask. 2. Just switching the masks up for simple sprites and keeping the rest as is with 5 masks? Is there any benefit on draw calls for instance if I had to mix 1 with 2, ie having one rendered texture but using it as 5 masks as opposed to 5 separate images for the masks? Also was interested to see what @cursedcoder mentioned about pixi-heaven - is this still applicable with V5 as I understand pixi-heaven still needs a bit of work with 5?
  35. 1 point
    Hi, I'm new to PIXI.js and we just have upgraded our project (floor planning) from v4 to v5.2.0 We set the background to white, draw horizontal and vertical lines, two axis lines and the floor design itself and everything was working on v4 before the upgrade process. the problem that not all lines are visible correctly, some lines disappear on zoom in and appear on zoom out. here is the code for drawing the horizontal and vertical lines: draw(keepCurrentGridSpacing?: boolean) { this.clear(); this.removeChildren(); let backgroundLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundLineSize, PixiConstants.backgroundLineSizeMax, PixiConstants.backgroundLineSizeMin); let mainAxisLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundAxisLineSize, PixiConstants.backgroundAxisLineSizeMax, PixiConstants.backgroundAxisLineSizeMin); if (!keepCurrentGridSpacing || keepCurrentGridSpacing.valueOf() === false) { this.updateBackgroundSquareSizeBasedOnScale(); } let fromX = ((-1 * this.stage.position.x) / this.stage.scale.x); let toX = fromX + (this.stage.canvas.getCanvasParentWidth() / this.stage.scale.x); let fromY = ((-1 * this.stage.position.y) / this.stage.scale.y); let toY = fromY + (this.stage.canvas.getCanvasParentHeight() / this.stage.scale.y); let startX = (fromX - (2 * this.backgroundSquareSize)) - ((fromX) % this.backgroundSquareSize); let startY = (fromY - (2 * this.backgroundSquareSize)) - ((fromY) % this.backgroundSquareSize); let endX = toX; let endY = toY; let width = endX - startX; let height = endY - startY; this.beginFill(0xFFFFFF); var color: any = PixiConstants.backgroundColor; this.lineStyle(backgroundLineSize, color); this.drawRect(startX, startY, width, height); // Draw Horizontal and Vertical Lines var i: number; for (i = startY; i <= endY; i += this.backgroundSquareSize) { this.moveTo(startX, i); this.lineTo(endX, i); } for (i = startX; i <= endX; i += this.backgroundSquareSize) { this.moveTo(i, startY); this.lineTo(i, endY); } // Draw Axis this.beginFill(0xFFFFFF); this.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor); this.moveTo(startX, 0); this.lineTo(endX, 0); this.moveTo(0, startY); this.lineTo(0, endY); this.stage.animate(); } private updateBackgroundSquareSizeBasedOnScale(){ let canvasWidth = this.stage.canvas.getCanvasParentWidth(); let canvasHeight = this.stage.canvas.getCanvasParentHeight(); let max = Math.max(canvasWidth / this.stage.scale.x, canvasHeight / this.stage.scale.y); let ratio = max / this.backgroundSquareSize; if (ratio < 10) { while (max / this.backgroundSquareSize < 10) { if (this.backgroundSquareSize == 100) { // Smallest grid size allowed is 1 meter break; } this.backgroundSquareSize /= 2; } } else if (ratio > 20) { while (max / this.backgroundSquareSize > 20) { this.backgroundSquareSize *= 2; } } } i'm sure it would be a small issue but i can't find anyone to help me, appreciate your efforts.
  36. 1 point
    Thanks for the reply @ivan.popelyshev. I think i got where the problem is. I was trying to understand how this particles effect works and basically i tried to emit only a particle at a time, if i increment the max particles, it will just work.
  37. 1 point
    Hi, i am curious what is best way to make collision. At this moment I make it this way: i have all elements with collision in an array and i iterate through it and calculate distance this way: let dx = this._enemies[i].cords.x - this._players[y].cords.x; let dy = this._enemies[i].cords.y - this._players[y].cords.y; let distance = Math.sqrt(dx * dx + dy * dy); if(distance < 100) { //collision } This calculations make a sphere. We can do it this way to get a square or rectangle: if(Math.abs(sprite1.x - sprite2.x) < 100 && Math.abs(sprite1.y - sprite2.y) < 10) { //collison } I think this is not the best method, because lets imagine we have 1000 things with collision. We have to calculate their distance 1000x1000 = 1000000 times per frame. My second thought is a 2d array that pretends to be map. If object is on x=200 and y=200 we can assign it like this map[200][200] = 1. And then another object check is that place is free (there will be 0 then). Its good when the object is 1 pixel wide and high. For larger objects it could be harder to implement. How are you doing this?
  38. 1 point
    We are lazy. We use a physics engine (or collision library). Wikipedia is quite enlightening. Optimization is done mostly through pruning and partitioning.
  39. 1 point
    @gogoprog have help me to solved this problem. And this topic is closed. Thanks everyone.
  40. 1 point
    @trych 5.2.1 is here: https://github.com/pixijs/pixi.js/releases/tag/v5.2.1
  41. 1 point

    Game loop advice

    With a brief look, I don't see anything wrong with the implementation. I would say it all comes down to `ctx.imageSmoothingEnabled = false`, which will cause the pixel positions to be rounded (which is desired for pixel-perfect pixelart game). At 60 FPS you sometimes get a pixel movement, sometimes don't, and not moving is essentially a frame skip, which at 60 FPS is visible. At 144 FPS, not so much (i.e. the timing is much smaller, so it's closer to reality). You can test that by playing around with speed setting, making it work well in 1/60 intervals. Although looking at your code, speed of 20 should work well (1 pixel every 3 frames). Try logging rounded position delta every frame and see if there's jitter or not. Repeating 0-0-1 should look good. Something like 0-0-1-0-1-0-0-2 will not. @Milton No, it's correct. It's simply an implementation of fixed timestep with rendering interpolation. When `dt` comes back smaller than `STEP`, rendering interpolation still makes the movement necessary. Thus allowing for a game with low logic rate (e.g. heavy physics running at 30 Hz) still render nicely on modern desktop with whatever refresh rate the display/gpu manages (~144 Hz, but anything really). Using `dt` directly would make anything with higher differential order non-deterministic and unstable (e.g. applying acceleration).
  42. 1 point
    OK, I'll look at it in a day or two if no one else does it
  43. 1 point
    I just now found the time to give this another try and just wanted to let you know: With the updated CDN file it works perfectly now! Thanks so much for your quick help, you saved my day! Great library and great support here in the forums. Thanks!
  44. 1 point
    Allen T

    ALIENbit - A very bad alien

    Not bad little game, like a gameboy color game. That boss face is SCARY 😌
  45. 1 point
    its link to a file, "piijs.download" is a link to our CDN . Either <script src=> it, either you can just put that piece of code in your project. You dont have to change anything else. BlurFilterPass is internal thing that was patched in that PR. It will appear in npm as a version 5.2.1 i dont know when.
  46. 1 point
  47. 1 point

    custome Event for pixi

    add a container inside, add containsPoint() that checks if its in red area. It should be easy if you know equations for square and circle.
  48. 1 point

    Change cursor view in PIXI.js

    Since this is the #1 Google Search result for changing Pixi cursor, just noting the URL appears to have updated: https://pixijs.io/examples/#/interaction/custom-mouse-icon.js
  49. 1 point
    It's actually simple for matter or impact, you just need to pass world instead of scene. super(scene.matter.world, x, y, sprite, frame, option); // if you are using matter // OR super(scene.impact.world, x, y, sprite, frame); // if you are using impact But if you are using Arcade, that creates a problem. you can't just extend Phaser.Physics.Arcade.Sprite. You have to add this line of code. scene.physics.world.enableBody(this, 0); P.S. To solve this kind of problem I created a development setup to custom create classes. IF you like you can check out my setup at github.
  50. 1 point
    always have to laugh when i read something like that, 98% of the games that pop out somewhere every year are somehow clones, not exactly 100% clones but they take ideas from existing games here and there i once read a article called "steal like an artist", its all about getting inspired by others if you can manage to create an unique game that dont remind you of another one then do it, but be sure you can make it quick and you can sell it and its really unique :> as for html5 games, to make a living out of it and ensure it works on most mobile devices i prefer simple games, concepts that work and lovely details you add to make it a bit better and bit more unique