All Activity

This stream auto-updates     

  1. Past hour
  2. Today
  3. Any other reason? Also what are the major differences between phaser renderer & pixi renderer?
  4. Because Phaser can't be too dependent on others, it will have to learn to stand on their own feet. so Phaser 3 is rendering by own.
  5. Yesterday
  6. check that it actually goes into that IF.
  7. Hello. Thanks for your reply Ivan. I tried using this.texture = Texture.from(this.source, { resourceOptions: { createBitmap: true, }, }); instead of loader but with no luck - it still lags. I'll do more research about createImageBitmap and eventually prepare a demo. Thanks
  8. Yes, there is. Its called createImageBitmap, and its difficult to use, because the footpath is traveled only by a few people. 1. You have to submit special parameter to ImageResource 2. Currently its not possible to do it through loader, we know about that for several month and nobody did anything. It happens in open-source collectives. - it does not pass any params from resource metadata, so you cant actually affect it. If you want to help with it - please create issue at github, then the rest of the team will pick it up. 2a. actually, you can enable that setting globally - but it can affect other places of your application, prepare for strange effects 2b. you can pass that param if you use "Texture.from(myUrl, options);" instead of loader 3. Even when you solve 1. and 2. there might be other problems regarding asynchronous decoding of image resource, so you have to read up how actually createImageBitmap works - its not pixi function, its browser one. We had only a few users who enabled that mode and used it, so there are not much experience about it. IF you find something wrong - dont hesitate to ask us, of course, if you have a demo Good luck!
  9. Hello. I have problem with dynamic change sprites texture. So the flow of the app is: I have two containers which overlap themselves. On the bottom I have container with one quite big image (6283x1024, 1MB) and on the top I have container for same image but tiled. Into the top container I put tiles (1024x1024, 100 - 300 KB) in a better quality. When app starts at the beginning I put only image for the bottom container in one sprite and prepare structure for the top(tiled) container - sprites without texture but with proper width/height/x pos/y pos. While sliding image (left or right) I detect which sprites from the top tiled container are visible on the screen and for those which are, I download images and replace textures. If all textures are loaded for the tiled container then I hide the underneath container and display tiled image in high quality. Tiled container has higher z-index then the second container, to make the image consistent while tiles are being downloaded. I have also slider service which uses ticker for auto-slide (left / right). The problem is that, when I replace textures I have lags and fps drops - from 60 to ~20-30. Is there a way to keep proper fps while replacing textures and keep the slide smooth without lags? Some code which belongs to my custom sprite class which extends Sprite class: // Detect if the sprite is on the screen isOnTheScreen(): boolean { const globalPosition: Point = this.getGlobalPosition(); return globalPosition.x + this.width > 0 && globalPosition.x < window.innerWidth; } // load it load(): void { if (this.isLoaded) { return; } this.isLoaded = true; this.loaderService.load$(this.source).subscribe((resources) => { const texture: Texture = resources[this.source].texture;, () => { this.texture = texture; }); }, // ToDo: error handling, perhaps retry downloading tiles once again. () => { this.isLoaded = false; }, () => { this.event$.unsubscribe(); }, ); } // event which says if we slide the image or do any other interaction setEventSubject(event$: Subject<boolean>) { this.event$ = event$.subscribe((detect: boolean) => { if (detect && this.isOnTheScreen()) { this.load(); } }); } // Slider service // ticker code which is in slider service this.ticker.add((delta) => { nextX = this.imageService.position.x - 5 * Math.round(delta); this.imageService.updatePositionX(nextX); this.canvasService.moveSprites(); // the event which goes to each sprite to start detection if they are visible on the screen this.canvasService.interactionEventTrigger$.next(true); }
  10. I have turned on javascript performance tool, made CPU throttling 6x and i see instant huge lag on your game. Analyzing the chrome console performance results i see that most of the time it renders and renders, there is not much logic happening. You have to reduce rendering that much. Looks like you are trying to paint everything using canvas and using less images. You also constantly redraw the whole canvas element and using just 1 canvas element. Thats the worst part actually. Your best and fastest way to fix the lag - make more canvas layers. As i see here you can easily create 2nd canvas element layer and draw animations just in there. And 3rd layer for UI, on top of animation layer.. If you have animated UI, make it as 4th layer. Also, there are some shapes drawing with canvas which can be copy-pasted by reducing long game load, if you dont want to use png images. That seems like a lot of work needed for you, to split the logic across several canvas element, but at the end result will be really good and the game will work easy on any weakest device. There is no other way. In canvas world that is usual, to use many canvas elements. For my HTML5 browser game (armygrid) i use 15 canvas layers. 2 for global map backgrounds (grass/sand..etc and other for rocks, bushes.. on top), 1 for map animations, 1 for dynamic textes and lines, 1 for army fights background, 1 for army units animation, 1 for army editor units, 1 for cover of army editor, 1 for requirements textes, 1 for main navigation, 1 for chat, 1 for flash messages, 1 for tutorial UI, and the last one for mouse events. So, on top of that, i am redrawing navigation and tutorial just if something is triggered by click, or if there are some real-time animated counters/numbers, i redraw once a second. Its even not yet perfect with frontend performance, but the performance is quite good and can play using 6x CPU throttling without much problems, also on any weak mobile. To achieve that, had to study and learn a lot the chrome developer tools - performance and audit.
  11. To be honest, this concerns me more now, I have a UI based game and every engine handles UI differently, moving my project is going to be like moving a mountain ... I guess the best part of Panda 2 was the runtime build on the side without manually setting up a local server (consider I am a noob at it). Does any other engine have a toolchain like Panda 2? Scripting and one click to play the build kind of setup?
  12. We are a bit off topic on the subject of this thread, so I guess bringing together Panda 2 developers is useless because there is no one working on a game with Panda 2? Right?
  13. Last week
  14. Hello, guys. I'm Marianna from Borna Tech. We have 5+ years of experience working as create HTML5 games and playable ads. We have developed playable ads for almost all TOP games that are accessible in the App Store and Google Play. Also, we develop gaming projects for Facebook Instant Games and other platforms. If you have time please take a look at our portfolio: If you are interested in freelance work, please don’t hesitate to contact me Thank you and have a nice day!
  15. Sorry for what may be a simple question, new to phaser and slowly porting my game over (which is going well, so far!) Anyways, it's a multiplayer game. My player class extends phasers sprite class, and I have two animations for the moment, bot h key'd left and right. In my player class, if the player is going left, I use'left') and visa versa for right. I was previously checking if an animation was playing before calling them, which leads to me occasionally going right but the left animation still playing. I've tried this.anims.getCurrentKey() to check if an anim is playing and if it's the same key, but it returns undefined. How can I determine if the left or right animation is playing? I created my anims like this: this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('char_run', { start: 4, end: 7 }), frameRate: 10, repeat: -1 }) this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('char_run', { start: 0, end: 3 }), frameRate: 10, repeat: -1, flipX: true })
  16. Okay so my older sister and I were online and found a game about zombies a few years ago. It was a game where you could control zombies, infect people, and pick up upgrades and use them along the way. You would infect the mall, a store, and whatnot. The game might have been an HTML5 game, but back then I didn't even know about programming languages so I could not have been able to even notice it. We've looked it up countless times for long periods of time, and have come to nothing. It is NOT Infectonator (or any of the games deriving from it), it is a free online game from a random website, maybe from Miniclip or Armorgames or Kongregate, Funorb, for all we know. You could use the mouse and keyboard for this one. The game would have no story at all, it was just a series of levels with increasing difficulty, the zombies were a bit slim, and whenever they would infect someone, their eyes would go kinda creepy and their arms go up and very cartoon-like they kill the victim. We're both sure that we did not make this up... does anyone know the name of the game?usps trackingshowboxspeed test
  17. Regular pixi text or one of advanced plugins, something was mentioned in one of latest threads... I dont remember which one
  18. Using gsap solved my problem, another little thing how can a display a box(100x100) with text on this slideshow
  19. Manga - Game Ready Character with PBR Workflow Game & Animation Studio Follow us: [ 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 ]
  20. Big news, guys! All of my tracks on my Dark/Ominous page are now available as very high quality Ogg files. They sound amazing…almost as good as the original WAV files that they were created from…and are much much smaller in size…perfect for videogames. Give them a try. On that note, some people have asked me why I’m offering Ogg files when they can simply convert my free MP3 tracks to Ogg themselves. You are certainly welcome to do this, but it won’t increase the quality of the tracks at all because you’re starting with MP3. The reason my Ogg files sound so great is that I’m creating them from my original WAV recordings. That said, this week’s new free tracks are: On my Fantasy 10 page: SKY DRIFTERS – (Looping) SKY DRIFTERS 2 – (Looping) On my Positive / Upbeat page: THE BALLOON HEADS DAY OUT – (Looping) On my Puzzle Music 5 page: FUNKY PUZZLER – (Looping) And on my Sci-Fi 8 page: DESOLATE STREETS IN A MACHINE WORLD – (Looping) ELECTRIC DRIZZLE – (Looping) Enjoy…and keep being creative!
  21. Hello, and welcome to the forums! Looks like a general JS problem. Someone will help you with code, I'm sure My two bits: 1. you can just add handler to pixiapp.ticker and remove it afterwards , instead of creating new one. IT doesnt matter in your case, but I want to make sure you know about that option 2. store images in array, store current image in a variable. 3. Usually scale is not by width/height, its by "scale" parameter and its exponential. Read up what "element.scale" is. 4. Usually people use tweens for that kind of stuff. Praise GSAP ( , google GSAP) . Its totally fine to write on your own first, because you need to understand how such things work.
  22. i am trying to making zoomin images slideshow using pixijs on canvas from three images below this I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on. I am writing this code var pixiapp; var pixiloader = PIXI.Loader.shared; initpixiapp(); function initpixiapp() { pixiapp = new PIXI.Application({ width: 1280, height: 720 }); document.getElementById('canvas-container').appendChild(pixiapp.view); pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload); } function handleimagesload() { var imagessprites=[] var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture); var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture); var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture); imagessprites.push(img1) imagessprites.push(img2) imagessprites.push(img3); for (let index = 0; index < imagessprites.length; index++) { const element = imagessprites[index]; pixiapp.stage.addChild(element); // here will the the code to run zoom image to specific width and heigth and then move to next image, // here is my code, its only display zooming third image var ticker = new PIXI.Ticker(); ticker.add(() => { console.log('ticker called') element.width += 1; element.height += 1; if(element.width==1500) { ticker.stop() } }) ticker.start() } } One more things, how to display a box with text for three seconds before slideshow start.
  23. You misunderstood Ivan anwser I think. TLDR : while(app.stage.children[0]) { app.stage.removeChild(app.stage.children[0]) } Problem with your code is that your remove element at a specific index during iteration, so you don't remove all elements. I think app.stage.removeChild() withotut parameter is equivalent to app.stage.removeChild(app.stage.children[0]), but can't check right now.
  1. Load more activity