All Activity

This stream auto-updates     

  1. Past hour
  2. Ultimately I want to have a canvas that fills the entire viewport width of the browser and have an image on the canvas fill the entire width of that canvas. I'm taking advantage of pixi.js's displacement filter so that I can create a pseudo 3d effect using a depth map underneath it. The code I'm currently using is let app = new PIXI.Application(); var w = window.innerWidth; var h = w / ratio; app.view.style.width = w + 'px'; app.view.style.height = h + 'px'; document.body.appendChild(app.view); let img = new PIXI.Sprite.from("images/horses.png"); img.width = w; img.height = h; app.stage.addChild(img); depthMap = new PIXI.Sprite.from("images/horses-depth.png"); depthMap.renderable = false; depthMap.width = img.width; depthMap.height = img.height; img.addChild(depthMap); app.stage.addChild(depthMap); displacementFilter = new PIXI.filters.DisplacementFilter(depthMap, 0); app.stage.filters = [displacementFilter]; Attached is a screenshot I even tried manually setting the width to the viewport pixel width on the canvas and the sprite to the actual pixel width of the viewport width and it still wasn't the right size. Manually setting the width for the viewport and sprite to the exact same number also doesn't work; the sprite is inexplicably smaller than the canvas. I tried to look at the documentation of the sprite class and see if there is something unusual about how sprites handle widths but I couldn't find anything https://pixijs.download/dev/docs/PIXI.Sprite.html How can I create a pixi.js sprite that fills the entire width of the canvas in order to make both the canvas and the sprite fill the entire viewport width?
  3. Today
  4. I want my game to have a mid- or background that has the world in it, and then some foreground objects. If the player clicks on a foreground object, then that should be handled one way, but if the player clicks within the canvas without hitting a foreground object then that should be handled another way. So my question is, does Pixi provide a nice way of going about this? What I've tried: // Method 1 const world = new PIXI.Container(); world.interactive = true world.hitArea = new PIXI.Rectangle(0, 0, this.app.stage.width, this.app.stage.height); world.on('pointerdown', () => console.log('hit')); this.app.stage.addChild(world); // Method 2 this.app.renderer.plugins.interaction.on('pointerdown', () => console.log('mouse is down')); I thought that there might be a way to create a container that only fires if a child objects of a different container weren't hit (these child objects being the foreground objects), but method 1 isn't firing the callback. Method 2 fires the callback but I'm not sure how to go from there to checking if a foreground object was hit. It occurs to me that I could have a global boolean that sets whenever a card is clicked, but that seems hacky and prone to breakage.
  5. Karg

    Game loop advice

    i'm slightly confused as to why you're dividing velocity by time? the result measures as acceleration (unit/time square), you need a distance, which means you should be multiplying velocity with step. bunny.pos.x += (bunny.vel.x / STEP) * bunny.dir.x; bunny.pos.y += (bunny.vel.y / STEP) * bunny.dir.y;
  6. Here is a local multiplayer game I've been working on in past few weeks. The base concept is done though there is still work left to do. Check it out and let me know what do you think! Thanks! https://zelcard.itch.io/color-brawl
  7. Sci Fi Soldier - Cinematic Trailer Character www.zagreusent.com Game & Animation Studio Follow us: https://www.facebook.com/ZagreusEntertainment https://twitter.com/ZagreusEnt [ AAA - indie price - zagreus zagreusent ze studio character concept high / low poly character & creature game prop weapon game rig and loop gaming animation production company studio india asia ]
  8. Hello there, I’m currently making a 2D Fan-made Fighting game based on Nickelodeon. I’m currently in need of assistance, so if you can help with any of these, it would be greatly appreciated! - Programmer - - Needs to know and own GameMaker Studio. If you have no experience in fighting games, I know of some tutorials that may be able to help. - 2D Animator - - Needs to be able to make and animate characters. The characters should appear 3D or 2.5D. So, if any of you are interested, please reply or contact me: Discord: SpongeBound104#8943 Email: camtheman.cf@gmail.com Hope to hear some positive responses!
  9. Yesterday
  10. Thank you, I would really appreciate it.
  11. OK, I'll look at it in a day or two if no one else does it
  12. In this case I am making the width smaller, so I was expecting it to be cropped just like the images. This is why I have manually set the frame with and height of the sprite to the known video dimensions. That's what I tried to do, hence my minimized example above. But you are right, of course the images and video are missing, so I created a full, self-contained example that I attached. There you can see that the video get's extended instead of cropped – as opposed to the images that get cropped to half their width. Thanks for having a look! videoCrop.zip
  13. That effect usually appears when you make width much bigger than actual width of baseTexture. Also I have no guarantee that this method works with mp4 because "from"-loaded things dont have the size initially, you have to trace whats goin on there and how much times UV's are calculated and whats in those UV's for particular sprite. Sorry, but without full example the only thing i can suggest in this case - Go Debug It.
  14. 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!
  15. jake

    Game loop advice

    I've been working on a base repo for pixel art games. The issue I've been running into is stutter when rendering sprites. Specifically I've seen this run buttery smooth on my laptop with a refresh rate of 144hz, but on 60hz monitors it seems to stutter. The game loop looks sensible to me, but I'm not sure what else to try at this point. Any help would be much appreciated. You can find the branch I'm working on here. The specific file of interest is game.ts. You can also see a live demo of it running on netlify.
  16. That's wrong. Typescript compiles to Javascript. Enums, generics, interfaces are all compile-time and they disappear after you compile. After that you can use it in any Javascript project anywhere, as long as it's up to whatever ES standard your compile target was. So yes, you can use TS and JS at the same time. It doesn't really matter.
  17. That's wrong. Typescript compiles to Javascript. Enums, generics, interfaces are all compile-time and they disappear after you compile. After that you can use it in any Javascript project anywhere, as long as it's up to whatever ES standard your compile target was. So yes, you can use TS and JS at the same time. It doesn't really matter.
  18. Happy Sunday! More free texture images ready on these pages: TXR – Rock / Stone - Seamless https://soundimage.org/txr-rockstone-seamless/ TXR – Alien Skins https://soundimage.org/txr-alien-skins/ TXR – Abstract https://soundimage.org/txr-abstract/ Don’t forget my 2000+ music and sound effects tracks, too. Free to use with attribution. Enjoy…and keep being creative!
  19. I think you need to add a tutorial or gameplay video Looks very cool though!
  20. I have been working on using bracket from a regular expression to make a key to loop through that makes a 3D mall first shooter you can add bots on left slider and shoot the 3D key to destroy it after it's built Goodie's Games 3 link
  21. Last week
  22. New hero added: Anime Finger Spirals Don't Have A Name Yet So I'm Calling Them Ressonnas
  23. https://developers.google.com/web/tools/chrome-devtools/javascript Find out what is wrong through debugging.
  24. Can you please explain it? As I know I have all the textures in one array and I'm loop through that so No chance to get null or undefined.
  25. Try 5.2.0 Debug `upload` method that you called. place breakpoints, trace what its doing, eventually it has to call that `renderer.texture.bind`. Or you can just delete this thing and call `renderer.texture.bind` directly
  26. Well, with 5.2.0 the issue has been fixed. Thanks a lot
  1. Load more activity