All Activity

This stream auto-updates     

  1. Past hour
  2. Today
  3. Alright, another year has passed, and I still consider Ninja.io to be in public alpha. I've decided to devote more time to this project in 2020. A lot of additional features have been added, and the player base is steadily growing. Here's a list of major changes: Settings menus have been added for video, audio and controls. Keyboard bindings/customizations. Major optimizations to the rendering code, especially the world geometry rendering. It also helps that Pixi.JS keeps getting better. The world editor has been improved. While not publicly available yet, it allows for more detailed maps to be created much faster. Several new, more detailed maps. New weapons and improved weapon balance. Numerous server optimizations, resulting in higher player cap and less data transfer. Major upcoming features include Battle Royale, which is nearing completion, the new ranking system and integration of social features. World editor screenshot: New map, more detail: Ideas and feedback are welcome!
  4. Hello Ivan, thanks for your reply. I haven't tested it yet under mobile OS. Currently I work on Chrome (Version 80.0.3987.106 (Official Build) (64-bit) / macOS Catalina 10.15. I also did a test on Firefox(73.0.1 (64-bit)) with almost same results - maybe it is a little bit smoother.
  5. I think bitmap is removed from object when texture is uploaded. Strange, i thought image decoding happens in separate thread, that was the point. Maybe its problem of browser under a mobile OS?
  6. Hello. I logged one of the textures and what I've noticed is that even if createBitmap parameter is set to true, the texture does not contain ImageBitmap object is that okay? (or perhaps it is create later?) but on the other hand in dev tools I can see that createImageBitmap is invoked - as you can see it still drops to ~14fps
  7. Look, kiwi is good but I am not sure you are it is capable to develop a game which you are thinking, but still I would suggest you to carry on and give it a try, at least you would gain some knowledge.
  8. Any other reason? Also what are the major differences between phaser renderer & pixi renderer?
  9. 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.
  10. Yesterday
  11. 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
  12. 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 https://github.com/pixijs/pixi.js/blob/67ff50884ba0b8c42a1011598e2319ab3039cd1e/packages/core/src/textures/resources/ImageResource.ts#L33 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. https://github.com/pixijs/pixi.js/blob/67ff50884ba0b8c42a1011598e2319ab3039cd1e/packages/loaders/src/TextureLoader.ts#L24 - 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!
  13. 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.canvasService.app.renderer.plugins.prepare.upload(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); }
  14. 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.
  15. 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?
  16. 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?
  17. Hello, everyone! It's been a while since I don't touch this project, but I really wanted some feedback on this. I call it Ready 2 Dance and it is a dance rhythm game that uses PoseNet and PixiJS. Inspired by ParaPara Paradise, DDR, OSU and many others, it consists on hitting the circles in the right time following the song, which would be identical to the choreography from the youtube video. Not all songs include the video choreography right now. Since it is a dance rhythm game that uses posenet, it is required to have a webcam to play. I hope everything goes alright accessing the camera. πŸ˜… And you would need to get up and dance. πŸ˜› At this moment all the content is restricted to the dance charts I make, but I wanted to make this open to every logged in user. I'm afraid of the proportions that this is going to take in terms of billing (I'm not familiarized with that) and trolling. I thought about making this an electron app instead, so the users can make whatever they want and share with whoever they want, but I'm not really sure if this would be the best solution. I'm pretty new to programming in general, so I would be really happy to hear any advice and opinions that you have. 😁 Link to the game: https://parapara-game.web.app/ Screenshots: I hope you like it! kikito
  18. Last week
  19. 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: https://borna-tech.com/ If you are interested in freelance work, please don’t hesitate to contact me mvysochanska@borna-tech.com Thank you and have a nice day!
  20. Hi! I'm going to try to explain my way. I have a simple scene: Background (PIXI.Sprite), static images (PIXI.Sprite, PIXI.Container, etc) and animations (PIXI.extras.AnimatedSprite). // Background stage.addChild(new PIXI.Sprite(Texture.....)); // I dont want to remove never. // Animations, I save my animations in a array: this.arrayAnimations = []; let animation1 = new PIXI.extras.AnimatedSprite(...); let animation2 = new PIXI.extras.AnimatedSprite(...); let animation3 = new PIXI.extras.AnimatedSprite(...); stage.addChild( animation1 ); stage.addChild( animation2 ); stage.addChild( animation3 ); this.arrayAnimations.push(animation1); this.arrayAnimations.push(animation2); this.arrayAnimations.push(animation3); // I can to access to animations via array this.arrayAnimations[0].play() this.arrayAnimations[0].position / scale // And I can remove it stage.removeChild( this.arrayAnimation[0] ); // in this moment is out from stage but it's in my array to use in another place. // Later, I can destroy the animation this.arrayAnimations[0].destroy(); this.arrayAnimations[0] = null;
  1. Load more activity