Popular Content

Showing content with the highest reputation since 01/18/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

    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
  3. 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...
  4. 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...
  5. 2 points

    complex games with html5

    Unity exports to a WebAssembly and WebGL output, no "plugin" needed. But that's not to say it's ideal for web, especially not mobile web (search up Unity "Tiny" instead) Possible yes ... but consider this first ... Motion Twins' "Dead Cells" is authored with Heaps, a Haxe based game framework (which has Javascript WebGL output options). Also Motion Twins' catalog before this title was predominantly web games so they clearly have web capabilities. Therefore ... it's reasonable to conclude there's no all-blocking "technical" reason why there isn't a browser version, but there are likely many commercial or user-experience reasons why such a game isn't being published on web (yet). Same issues would likely apply / hinder any other similarly scoped game intended for web, irrespective of authoring tools? Conclusion, as always, is ** understand the audience ** ... on what platform do they want their game (big, complex, small, tiny) to be on. Or ... make web games that absolutely require, embrace and leverage the "web".
  6. 2 points
    Hello! There's one small isometry demo: https://pixijs.io/examples/#/plugin-projection/iso-basic.js However that's not how I usually do isometry. Usually I just use Y scaled by 0.5. You even don't need those "x+z" "x-z" coordinates, if you want to make tiles - take whole two-dimensional array and remove "odd" cells. Like, use only "black" cells of chess board. Then the only problem is to detect which tile is under mouse, but then it will be the only place where you have a isometry math. Everything else is just "x=x'; y = y' / 2" I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info. and Welcome to the forums!
  7. 1 point
    Hi, I want to create a mesh with shader, and through uniforms webGL textures to shader, I'm able use pixiapp.renderer.gl.createTexture, it works. But other sprite in pixiapp(PIXI.application) stage also force to mesh's webGL Texture is webGL texture binding index confusion? (gl.TEXTURE0) maybe need to use pixi webgl abstraction? does anyone have idea? best regrads.
  8. 1 point
    Sup guys: Just trying to make a server side 3D image for my website. I want it to look just as good as the 3D images on FaceBook. I know how to make depth maps properly, I just need the code to add it to my own site. You can see a bad example using Pixi code below. Just scroll down to where it says "demo" near the bottom of the page, and scroll over the picture for the effect. This is what I want, but it has to look good, like the 3D images you see on FaceBook: Demo I know Pixi code can help me, I'm just not that smart to know how to use it. Hope someone can help. Thx. -el
  9. 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.
  10. 1 point
    Hi, i'm a beginner at pixi.js so please bear with me! I'm trying to add a sprite of a certain type whenever the user presses a button. However I need all the sprites to be moving towards the right every frame. So for now I have the following code triggered when the user presses a button: egg = new PIXI.Sprite(PIXI.loader.resources["images/newegg-02.png"].texture); pubviewport.addChild(egg); Which works fine, however I'm not sure how to access the X and Y values of all the eggs that currently exist in order to move them. In the gameLoop function, just adding an egg.x += 4 doesn't work, so what do I do? Have also tried a for loop like so: for (var i = 0; i < pubviewport.children.length; i++){ pubviewport.getChildAt(i).x += 4; } Thanks A
  11. 1 point

    Spritesheet problems

    So, I've been struggling to get spritesheets to work in PIXI. I've got everything hosted on a webserver and have followed the instructions on the documentation for the new way with V5. Its not working and I'm not quite sure where I'm going wrong. PIXI.Loader.shared.add("images/floortiles.json").load(gameStart); function gameStart() { let sheet = PIXI.Loader.shared.resources["images/floortiles.json"].spritesheet; stage = new PIXI.Container(); renderer = PIXI.autoDetectRenderer( 800, 600, {view:document.getElementById("game-canvas")} ); } Now, I'm not sure the best way to go about using the Sprites as I'm still learning; however, I've got something that should load the correct frame from the sheet. grasstile = new PIXI.Sprite(sheet.textures['tile_2.png']); That being said, all of this was successful with separate image files. I just haven't been able to make use of the spritesheet functionality. I would GREATLY appreciate any insight you guys can provide. Thanks!
  12. 1 point
    Thank for answer again! Actually, I try to make video yuv to rgb in pixi.texture. After decoded video data bind to three textures(yTexture, uTexture, vTexture), pixi.shader trans to rgb values in pixi.geometry, when video decoded data keep coming, that need to update textures(yTexture, uTexture, vTexture). It's ok that run only one yuv to rgb geometry in canvas, but add other sprite, the textures confuse problem happened. attach demo code. pixi_YUVRGB_demo.zip
  13. 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.
  14. 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!
  15. 1 point
    So I've figured there are two main ways to render multiple moving shape objects with PIXI.Graphics. 1) Use only one Graphics instance, clear it on each redraw and simply draw each shape in their new position every tick. 2) Use one Graphics instance per shape object. Draw each one once at the beginning. On each redraw move the graphics instance to their new positions. I'm wondering if I should prefer one method over the other and why?
  16. 1 point
    nice! it works well. thank you for your help.
  17. 1 point
    I am using "pixijs/pixi-tilemap" library to render maps exported from Tiled, but the rendering frame rate is low. I am newbie and I guess there may be a problem with the rendering loop logic, My thinking is as follows: I have several rendering layers(PIXI.display.Layer) in my game, I call them 'RenderingLayer', there are several cameras in the game (inherited from PIXI.Container), each camera can render multiple 'RenderingLayer' And output to RenderTexture, finally use the PIXI.Sprite group to render the final result according to the depth property of the camera. I use the ECS architecture to implement the game Code of RenderingSystem.update: for ( const camera of this.cameraComponents ) { if ( camera.renderingLayers.length === 0 ) { continue; } // clear stage $app.stage.removeChildren (); // add current rendering camera $app.stage.addChild ( camera.cam ); // collect camera rendering layer for ( const layerName of camera.renderingLayers ) { if ( $app.renderingLayers.has ( layerName ) ) { let layer = $app.renderingLayers.get ( layerName ); if ( layer.visible ) { camera.cam.addChild ( layer ); } } } // rendering camera result Graphics.render ( $app.stage, camera.renderTexture, this.renderTarget ); // clear camera.cam.removeChildren (); } // render final result this.renderSprite.removeChildren (); for ( const camera of this.cameraComponents ) { this.renderSprite.addChild ( camera.renderSprite ); } renderer.render ( this.renderSprite, null, true ); May be frequent use of removeChildren / addChild affects rendering performance?😳 I use the ECS architecture to implement the game, You can find the code for the RenderingSystem class here: js/ecs/systems/rendering_system.js. Another guess might be that I did not use the pixijs / pixi-tilemap library correctly.😲 see here: https://lihaochen910.github.io/RPGMakerProject/ code is here: https://github.com/lihaochen910/RPGMakerProject
  18. 1 point
    @Zygomatic Thank you!!! I have plans to add +50 Levels... With some extras... like stars for score, enemies and more. Don't hesitate to contact me anytime!
  19. 1 point
    Looking for some feedback on best practices for handling large texture data. On desktop, it seems I can easily load large textures exceeding 8k on a side; however, mobile fails to render past 4096 pixels on the longest side. Project I'm working on loads schematic views, of sorts - there's a background image on which components are placed. Zoom / pan is implemented from Pixi-Viewport project. These are available as vector, but prototyping as SVG seems to incur a significant performance loss. Not sure if there's a mipmapping approach, or some kind of level of detail such as TileMap. Roughly following the TileMap project... background image is sliced and loaded via multiple frames. Presume source code for the "webgl: zoomin and zoomout / retina webgl: zoomin and zoomout" examples are just https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js The canvas version doesn't appear to be working: main.js:104 Uncaught TypeError: Cannot read property 'flush' of undefined at update (main.js:104)
  20. 1 point
    Thanks! I got it to work by changing the local source links to CDNs with the version downgrade. And yes, still pretty new to everything, only picked up coding a few months ago and learning to navigate all the systems.
  21. 1 point
    Examples are hosted from `gh-pages` branch of that repo https://github.com/pixijs/pixi-particles/tree/gh-pages. It contains pixi-v4 districution in a "lib" folder. Usually people dont just download stuff - they clone it and switch branches. That means you are not familiar with git enough, right? If you download that branch - your simple http-server approach should work. Just be aware that it contains old version of pixi, its up to you to update it and migrate examples if needed. "PIXI.particles.ParticleContainer" was renamed to just "PIXI.ParticleContainer". Read about more differences at https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide
  22. 1 point


    Hello, I know this question has been already answered and posted. But I am having a problem trying to achieve this "scratchard effect" https://pixijs.io/examples/#/demos-advanced/scratchcard.js I have it working nice, with a superb brush and drawing nicely from last postiion to new one, when I have one image over another and I apply a mask. It works flawlessly. No complaints at all. The problem is when I want to have this overlay as "standalone" scratchable overlay. What I mean is I want to cover a few sprites, with this overlay and scratch this surface/overlay and draw what it is under it. I am used to PIXIJS 4, and even upgraded to version 5 to try to use BLENDER_MODES.ERASE but it does not work in any way. Is there anyway to: Access overlay sprite texture Paint with the brush so we add ALPHA to the "selected pixels"? In this way i think it does not matter what's below the overlay/scratchable image, as we will draw "holes" on it and see through the sprite. Cheers
  23. 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.
  24. 1 point

    Fastest way to do masking?

    OK, i recommend to test it for pixi 5.1.5 and 5.2.1
  25. 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
  26. 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.
  27. 1 point

    Change background image

    Hello, Im trying to change the background image of a game built using pixijs. Im just wondering what is the best way to do it ?. Currently im using the below method but the problem is i have to redraw all the other child elements after i change the background. Thank you const parent = app.view.parentNode; var imagePath = "images/"+image; var landscapeTexture = PIXI.Texture.fromImage(imagePath); var texture2 = new PIXI.Texture(landscapeTexture, new PIXI.Rectangle(0, 0, parent.clientWidth, parent.clientHeight)); background = new PIXI.Sprite(texture2); app.stage.addChild(background)
  28. 1 point

    Change background image

    Hi @ivan.popelyshev Thanks for replying. Sorry if its not clear. Let me explain further. Im creating a simple jigsawpuzzle game and Im following the method explained in below thread . Now i want to add a background to the game. For that im using the method i have explained in the post. My problem is, whenever i change the background image i also have to redraw the puzzle pieces again. So im wondering is there a better way to do this where i can just change the background layer without having to redraw all the pieces ?
  29. 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.
  30. 1 point

    [3D]A Twist to Fruit Ninja

    Hi, This is my latest game: Shoot the fruit built using the Playcanvas Game Engine. Name: Shoot the fruit Link to game: https://playcanv.as/b/9ESV9pNM/ Screenshot is attached I am selling this game, DM me for more details Regards
  31. 1 point
    Hi there, after having received great support here recently posting my first pixi.js issue, I now run into another problem I can't resolve. On my page I load a mix of images and videos as sprites. The goal is to crop these sprites, which I can achieve by changing the frame with and height of the corresponding texture. While this works flawlessly for images, when I try to do the same thing for videos, they don't get cropped, but they sort of crop but then extend their last pixel column up until the full length again. See the sample screenshot I attached, where I tried to crop a video to half its width, but it then got extended in the way I described. Here is my code: const canvas = document.getElementById('mycanvas'); const app = new PIXI.Application({ view: canvas, width: window.innerWidth, height: window.innerHeight }); document.body.appendChild(app.view); app.loader.add(mediaResources).load((loader, resources) => { let sprites = []; let resource, texture, frame, fw, fh; for(let i = 0, counter = 0; i < mediaResources.length; i++, counter++) { resource = resources['rs' + counter]; if(resource.extension === "mp4") { texture = PIXI.Texture.from(resource.url); frame = texture.frame; fw = 1024; fh = 576; } else { texture = resource.texture; frame = texture.frame; fw = frame.width; fh = frame.height; } // crop the frame to half its width, leaving only the right half frame.width = fw * 0.5; frame.x = fw * 0.5; texture.updateUvs(); sprites[i] = new PIXI.Sprite(texture); sprites[i].y = i * 600; sprites[i].x = i * 600; app.stage.addChild(sprites[i]); } }); Am I doing something wrong or is this just the way pixi.js treats video textures? If so, is there a way to work around this and still get the result of a video sprite that is cropped? Thanks a lot for looking into this!
  32. 1 point
    "graphics.parent" Or do you not have link to graphics itself from event listener body?
  33. 1 point
    Hi there, I'm totally new to pixi.js, but somehow managed to do my first steps. Now I am stuck with a problem however. I am trying to use pixi.js for an interactive slide show to blur the upcoming and previous images (as sprites). All works nicely, except that at the blur edge of my left blurred somehow some colors of my right blurred image seem to "spill" in. I am not sure how to describe it best. It seems to me that behind the scenes the images are merged somehow, then blurred all together and then cut off at a slightly incorrect position. I attached a screenshot that demonstrate the issue. Each of the sprite has its own filter (since I need to animate them independently) and the problem does not only happen between the two sprites shown in the image, but also between the other sprite pairs as well, once the slideshow moves on to the next slide. I have tried to change all blur filter settings, padding, kernelSize, quality, blur amount, nothing seems to fix the issue. Does anybody maybe know what the issue could be, and – more importantly, how I can fix it? My setup is quite complex, so I don't know what are the most relevant code snippets that would help you analyze the problem. My hope is that by the visuals of it one of you could make an educated guess about what's wrong. However, here is also the code I have in a gist, just in case: Code If there is any more information I can provide to help solve the problem, please let me know. Thanks! trych
  34. 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).
  35. 1 point
    OK, I'll look at it in a day or two if no one else does it
  36. 1 point
    Allen T

    ALIENbit - A very bad alien

    Not bad little game, like a gameboy color game. That boss face is SCARY 😌
  37. 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.
  38. 1 point
    Hi, I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3: If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images: If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ... This is the complete code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const sprite1 = new PIXI.Sprite(resources.photo1.texture) const sprite2 = new PIXI.Sprite(resources.photo2.texture) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html> Has anyone a good idea? Siddi
  39. 1 point
    OK, done, npm 2.0.5 , or "dist" folder of the repo.
  40. 1 point
    Yeah, i think @eXponeta solved that for his game. He can make you simple demo because his code is usually reusable
  41. 1 point

    complex games with html5

    you can use any frameworks or game engines that can export to various flavours of browser content (js/canvas/webgl, webassembly) to make any game. if you meant complex game-play, the only limit is the sky 😛 if it's complex content (lots of graphics, animations, music, sounds), then yeah, there are limitations on what you can achieve for web. the main limit i see is the size, but here the discussion would diverge into: would you like you game available as web desktop, web mobile over wi-fi, web mobile over mobile data? a common denominator would be to keep the total size of the game below 20MB (code + assets), but with such low size, even you optimize the living hell out of your assets (choose a base resolution way lower than 1920x1080, use dragonbones/spriter for animations, downgrade the quality of music) you won't achieve the quality and quantity of assets of any of the aforementioned games. alternatively, you can use asset bundles and stream music/sounds on demand, but then if the player plays it on mobile data, can he afford the data charges for these dynamic loaded assets? as alternative 2, you can offer your game as a pwa (progressive web app), in which case some of these restrictions can be avoided (although the support for this is not wide-spread and probably only available to newer mobile devices and mobile operating systems). the second restriction is performance for canvas/webgl, where you have to use as fewer textures as possible to keep the draw calls low and maintain a steady fps. in this case, you'll probably want only a couple of 2048x2048 textures active at a time, and as you can guess, you won't reach the same level of quality as the games you've pointed to.
  42. 1 point
    Actually, I do not consider html5 as a way to earn money for now. It's a hobby for me and maybe only in the future, I'll be able to do freelancing. Nowadays I just try to use decent financial tools in order to keep my money save. For example, on this review, I found information about one visa credit card. It's quite advantageous because it has no yearly fees.
  43. 1 point

    [WIP] Devader (AntiMiner)

    I've made a web-demo for Devader, would appreciate if you check it out: http://www.devader.space/html/game.html
  44. 1 point

    Sprite blending

    Does anybody have any suggestions on how I can get this effect using PixiJS? I'm new to PixiJS and game development in general so any suggestion would be great. How I think it works is that the water sprite is rendered on a higher layer and has its edges transparent. The only thing that doesn't work when I think about it this way is that the cells overlap eachother which doesn't make sense if each cell is in a grid at a fixed size. Hope somebody can help demystify how I can accomplish this in PixiJS. Thanks
  45. 1 point

    collision in js + three.js

    I read in this article Real Time Multiplayer in HTML5 that we should to create a fixed physics loop on server and on a client. Server should have high frequency loop for physics and low frequency loop for sending messages to clients. I upload the example from the article on the free Heroku hosting https://battle-world.herokuapp.com/?debug You can run it in two browser windows. Free hosting has limits. If no one runs the application 30 minutes the server will sleep until someone wake up it. To wake up server you need to wait 10-15 seconds.
  46. 1 point

    Tween inside mouseover event

    var tween = (undefined).add({ targets: heart, alpha: { value: 0, duration: 3000, delay:2000}, });
  47. 1 point
    @ivan.popelyshev AWESOME! I knew it was something logical, was going crazy there for a while. Thank you very much! Now a followup question: How would I go about using another image as the "renderTexture", so instead of using WxH pixel values use an image instead and therefor being able to count pixels that are not just 400x400. Here is a fiddle with updated assets. Hope that makes sense, not sure how to explain it..
  48. 1 point
    Hi there, We are trying to make a very innovating web game and we are seeking developers or a team to create our game. We are not yet decided on frameworks or any technologies. Although we are very interested in HTML5 & no flash. This game will be very social media integrated. Here would be a sample but just much more creative.... http://www.lunarcafe.com/fun-games/3-card-tarot-reading-free If you believe you can help, Please email me at: Arian.y@pacificmez.com Thank you