Search the Community

Play 3D first person shooter game Warfare Area 3. Your mission is to explore the enemy base and take down all the guards in the area. Shoot enemies, pick up first aid kits and earn money to upgrade the armor and guns. Play Warfare Area 3

3D first person shooter game. Your mission is to explore the enemy base and take down all the guards. Shoot enemies, pick up first aid kits and earn money to purchase various upgrades. Play Assault Time

Take the rifle and get ready for a battle in this 3D first person shooter game playable on mobile phone and computer. Your mission is to eliminate all enemies in the area. Shoot enemies, pick up first aid kits and try to survive in this war. Play Warfare Area 2

Hi, I'm trying to replicate the camera movement from a typical FPS game. I want the camera to follow the player's mouse, without the need to click at all. Here's what I've got so far: var lastMove = 0;oldx = 0,oldy = 0,mousemovemethod = function (e) { if(Date.now() - lastMove > 40) { if (e.pageX < oldx) { camera.rotation.y -= .1; } else if (e.pageX > oldx) { camera.rotation.y += .1; } if (e.pageY < oldy) { camera.rotation.x -= .1; } else if (e.pageY > oldy) { camera.rotation.x += .1; } oldx = e.pageX; oldy = e.pageY; lastMove = Date.now(); }}document.addEventListener('mousemove', mousemovemethod);The camera movement is rough and intermittent. I'd like it to be smooth with a bit of easing. Here's a link to the full code: http://www.babylonjs-playground.com/#WM1VE My question: How can I smooth out the rotation code above, or is there a better way? Solution: camera.cameraRotation.ycamera.cameraRotation.x cameraRotation provides the smooth transition I was looking for.

I'm working on an application which allows to make image processing, so I used Javascript and PixiJS library to make it possible. I wanted to update cursor image when canvas was hovered first solution I tried to use cursor: url(cursor1.png) 4 12, auto; but I can't resize cursor. The default size is 64px and I can't set another value. second solution I decided to add into DOM <img src=""> and update x,y position using Javascript but I got latency. third solution was to integrate cursor inside my canvas. last solution I tried to split actions into 2 canvas. The first deals with image processing and the second is my cursor. With all propositions made before I got loss of FPS when canvas is hovered excepted the first one. Init canvas for cursor update when mouse hover it function _initMainCanvas(imgData) { let newCanvas = new PIXI.Application({ width: imgData.width, height: imgData.height, transparent: true }); let blurContainer = new PIXI.Container(); filters.initFilters(); // ---------------------------------------------------------------------------------------- // Normal Sprite // ---------------------------------------------------------------------------------------- let bg = main.createSprite({ from: imgData.img, interactive: true, filters: [filters.getFilterSharpen(), filters.getFilterAdjustment()], width: imgData.width, height: imgData.height }); newCanvas.stage.addChild(bg); //$(".blur_cursor").remove(); // ---------------------------------------------------------------------------------------- // Blur Sprite // ---------------------------------------------------------------------------------------- let bgBlured = main.createSprite({ from: imgData.img, interactive: false, filters: filters.getFilters(), width: imgData.width, height: imgData.height }); blurContainer.addChild(bgBlured); blurContainer.mask = containers.getBlurs(); newCanvas.stage.addChild(blurContainer); newCanvas.stage.addChild(blurContainer); select.initSelectionRect(); newCanvas.stage.addChild(select.getSelectionRect()); canvas.addMainCanvas(newCanvas); document.getElementById("container").appendChild(newCanvas.view); } Init canvas for cursor update when mouse hover it function _initCursorCanvas(imgData) { let cursorCanvas = new PIXI.Application({ width: imgData.width, height: imgData.height, transparent: true }); _fillCursorCanvas(cursorCanvas); canvas.addCursorCanvas(cursorCanvas); document.getElementById("container").appendChild(cursorCanvas.view); } function _fillCursorCanvas(cursorCanvas) { // emptySprite allows to bind events let emptySprite = new PIXI.Sprite(); emptySprite.interactive = true; emptySprite.width = cursorCanvas.screen.width; emptySprite.height = cursorCanvas.screen.height; cursorCanvas.stage.addChild(emptySprite); emptySprite .on("pointerdown", canvasEvents.handlerMousedown) .on("pointerup", canvasEvents.handlerMouseup) .on("pointermove", canvasEvents.handlerMousemove) .on("pointerout", canvasEvents.handlerMouseout); const scale = W / canvas.getWidth(); const cursorTexture = new PIXI.Texture.from( urlManager.replace("index.php/", "") + "assets/images/cursor_img/50.png" ); let circle = new PIXI.Sprite(cursorTexture); circle.width = 50 / scale; circle.height = 50 / scale; cursorCanvas.stage.addChild(circle); } Mousemove event const x = e.data.global.x; const y = e.data.global.y; cursor.updatePosition(x, y, W); Sorry I can't show you an example like codesandbox because my browser but my browser was not responding. However I can send you github repo if you want. Will anyone know how to optimize FPS on mouse flying, thank you in advance !

The second part of the 3D first person shooter Bullet Fury. Your troop has discovered the position of a new enemy laboratory. It's up to you to eliminate all the guards of the laboratory. Play Bullet Fury 2 Play on mobile

Hi all I'm CodingButter I have been developing a 2d game engine from scratch. I wanted to get some opinions about the tick and render loops. I currently have my render loop executing as fast as requestAnimationframes will let me. And I've also trigger my ticks with setTimeout. I've noticed by doing this I am consistently getting 200 ticks per second. I was wondering what the drawbacks would be for using setTimeout in this way. I personally don't seem to see anything but improvement to my game behavior. but I'm sure there is something big i'm overlooking performance wise. Any thoughts. Also Excited to find a community to chat with. Codesandbox.io Link Twitch Discord

3D first person shooter. Take the challenge to invade the enemy captured territory and shoot all the guards one by one. Be quick otherwise they will fire back. Play Assault Zone on computer Play on mobile

Is there a simple way to show fps in PIXI.js?

http://shellshock.io My first BabylonJS project is a whacky multiplayer first person shooter featuring, well, eggs, of course! It's in very early development and still fairly rough around the edges, but it's super easy to jump in quickly and play. It's just been made public, so finding people to shoot may be a little hit and miss (pun intended). Enjoy! Facebook: http://www.facebook.com/ShellShockGame Twitter: https://twitter.com/eggcombat

I'm getting a lot of inconsistencies in fps due to requestAnimationFrame calls randomly taking a long time where it doesn't look like there is anything being called inside of it until the tail end of the call. What it does show in the call tree only takes PIXI 1-3ms to flush or update transforms while the RAF call can last anywhere from 8-15ms. The devtools are also showing that the GPU and other threads aren't doing any irregular work when the long RAF call happens. It happens at least 10-20 times within a 30 second Chrome devtools performance recording. Has anyone else experienced this kind of thing before? https://imgur.com/a/8Uh8028

I've got a situation my physics simulation is running at high framerate (60fps), but some devices my app runs on cannot run the graphics (PIXI) at 60fps without causing the physics simulation to stutter and jump, causing undesired artifacts. So, in pursuit of performance, I shoved the physics simulator (in my case, matter.js) into a web worker, but then still found that some devices couldn't handle updates at 60fps in the main thread. So I started setting an interval to apply updates from the simulation to PIXI at a fixed rate - 30 fps to start. However, sometimes even on some devices that was unsustainable. So, the question came down to - what FPS *should* my app run at? And when I say "run", I'm talking about changing the position of PIXI objects base on updates from the physics simulation, not about changing the speed of the PIXI's ticker. Since the speed at which I could apply updates from the physics simulation and still achieve sustainable render speeds without lagging varied from device to device, I decided the best way to decide on the FPS to run at would be ... let the app itself decide at run time. So instead of coding a fixed FPS, or giving the user a slider to adjust, I let my app measure and adjust it's FPS based on what it measures as sustainable while it's running. Enter my solution for my app, FpsAutoTuner: https://gist.github.com/josiahbryan/c4716f7c9f051d7c084b1536bc8240a0 - contributed here to the community in case it may help someone else solve a similar problem. It's framework-agnostic, no external dependencies, written as an ES6 class, but could easily be rewritten as a ES5 if you wanted. FpsAutoTuner works by measuring the FPS (which you tell it by calling `countFrame()`) and then every so often (at `tuningInteval`ms), it compares that measured FPS to the `fpsTarget`. When the measured FPS goes below `fpsTarget` less `tuningMargin`, the `fpsTarget` will be decreased by `tuningRate` and the `callback` will be execute with the new `fpsTarget`. Likewise, when the measured FPS exceeds `fpsTarget` less `tuningMargin`, then `fpsTarget` will be increased by `tuningRate` and `callback` will be called with the new target. Example usage: // Somewhere at the top of your file import { FpsAutoTuner } from './FpsAutoTuner'; // Then later in your code, probably in your constructor of your game object this.fpsAutoTuner = new FpsAutoTuner({ fsTarget: 30 callback: fps => this.setFpsTarget(fps) }); This assumes that you have a function called `setFpsTarget()` on your class, probably that does something like this: // This is just an example method, on your own class... setFpsTarget(fps) { clearInterval(this._fpsTid); this._fpsTid = setInterval(this._render, 1000 / fps); } Then later in the rendering portion of your code: // inside the render loop of your code, call: this.fpsAutoTuner.countFrame(); That's it! Your app will now automatically adjust it's FPS as needed when it detects lower/higher frame rates available. (FpsAutoTuner automatically starts it's auto-tuning timer in it's constructor.) There are plenty of options you can pass to FpsAutoTuner to tweak it - they are all documented at the top of the gist. Specifically of interest, you can set `tuningInterval` (default 5000ms) to change how often it measures/changes the FPS. This all has just been a humble attempt to give back to the community. Use and enjoy. Contributions/changes/suggestions to the gist are welcome! Download FpsAutoTuner from GitHub here.

Greetings! I am working on a horizontal scrolling rhythm game in React that uses Pixi for generating sprites. I want to use PIXI.ticker.elapsedMS to determine when a new sprite should be created and how far it should move its x position to stay in time with the song. My issue is that ticker.elapsedMS is taking longer than the expected millisecond value for a single frame at 60 fps. Is this expected behavior for ticker.elapsedMS to fall behind in a simple example like this? import React, { PureComponent } from "react"; import { css } from "react-emotion"; import * as PIXI from "pixi.js"; import "pixi-layers"; export default class PixiHighway extends PureComponent { constructor(props) { super(props); this.pixi_container = null; this.expectedFPS = 60; //assuming we're at 60 FPS this.expectedMSPerFrame = 1/this.expectedFPS*1000 //roughly 16.67 this.app = new PIXI.Application({ width: 1200, height: 800, transparent: true, backgroundColor: 0xffffff }); this.app.stop(); this.app.stage = new PIXI.display.Stage(); this.app.stage.group.enableSort = true; this.startSongTime = 0; } updatePixiCnt = element => { // the element is the DOM object that we will use as container to add pixi stage(canvas) this.pixi_container = element; //now we are adding the application to the DOM element which we got from the Ref. if (this.pixi_container && this.pixi_container.children.length <= 0) { this.pixi_container.appendChild(this.app.view); } }; update = delta => { this.now = new Date().getTime(); const songElapsedTime = this.now - this.startSongTime; if (this.app.ticker.elapsedMS > this.expectedMSPerFrame) { console.log( "WARNING Under 60fps! elapsedMS:", this.app.ticker.elapsedMS, "deltaTime:", this.app.ticker.deltaTime, "Dropped frame this far in ms through the song:", songElapsedTime ); } }; startTheTicker = () => { this.app.renderer.plugins.prepare.upload(this.app.stage, () => { this.app.start(); }); this.startSongTime = new Date().getTime(); this.app.ticker.add(this.update); }; render() { return ( <div> <button className={css` position: absolute; top: 900px; `} onClick={this.startTheTicker} > Start animation </button> <div className={css` position: absolute; z-index: 2; `} ref={element => { this.updatePixiCnt(element); }} /> </div> ); } } Here's the result of the console.log when this.app.ticker.elapsedMS > this.expectedMSPerFrame. Is the log just slow or is my ticker being run incorrectly? Thanks for your time!

Hey! Did anybody compare Phaser and pixi for performance? We're going to make isometric game. bottom line is about objects you could render per screen. What do you think? What to choose? Phaser 2, PIXI, or maybe Phaser 3? Need the canvas renderer of course, not webgl. Update: I've the same question in the phaser slack channel. It seems that the PIXI would be better for isometric game then Phaser 2.

Hi, I've noticed that switching between states or entering next state causes frame drop in my game. First off all I need to say that I'm using Phaser.State in a little bit different way. I've split my game in multiple sections, like: IdleState, MovingState, AnimatingState, BonusGameState, etc....I was testing the game on my desktop PC, disabled practically all my code and also hidden all display objects. The only thing left in my game was testing the state switching, which resulted to be the main issue for the frame drop. It happens only twice, once you enter a new state. First frame drop (from 60FPS -> 20FPS) happens almost at the entering phase, and the 2nd happens always around 2.3s later. And this is super annoying especially because you can notice flicker in Moving & Animating state, even though we're talking here only about two occasions of frame drop per state. I would like to know what could be the most expensive method/command inside StateManager -> clearCurrentState() and StateManager -> setCurrentState(key) ? I wouldn't like to break everything apart now, just because of this. Is there a way to optimize anything here?

Hi there, I have a "more o less basic" game and now that is almost finished, I realized that the performance on iOS is ridiculously bad. Running the game on old Android devices I get easyly 60 fps, everything runs smoothly, but the same game, running on an iPhone 7 (and obviusly on older devices) it´s gettting 15 fps, being and easy game on a much more powerfull device (good one, Apple). The thing is, I read that maybe tilesprites (I´m using one) could "help" to this poor performance, but this is not the case, even without that tilesprite I´m still getting 15 fps... Can anyone point to things to check? Stuff that affects only iOS? I´m not finding how to fix this...

TL;DR - How can I programmatically detect slow / choppy animation? My company uses pixi.js to create animations for digital signage (screens in waiting rooms, train stations, airports, billboards, etc). Our clients use a wide variety of hardware to display our animated content. Some of them are high powered, but most of them are pretty crappy. Most of our animations are rendered at HD (1920x1080) or 4K (3840x2160) and often have large images in them (news photo with headline). I have noticed on really low-end hardware when we animate the images using a ken-burns effect or a slide-in effect, the animation is VERY choppy, even for devices which support WebGL. We want to be able to programmatically detect choppy playback and use that info to adapt the animation. Here's some psuedo code... if (isLowQuality()) { // Show content without animation effects } else { // Use high-quality animation effects (filters, cross-fades, etc) } Does anyone here have advice how I could implement the isLowQuality() function? Do I measure average ticker.FPS over a few seconds? If so, what's the best way to do that? I am new to PIXI. Any help is appreciated

Hello, Since some day, firefox turn phaser game slow. All game i have created and even litle game downgrade fps. (60FPS to 30FPS) I dont know where is the problem. i have try use phaser but no change. You can try with this example : https://phaser.io/examples/v2/time/slow-down-time if you wait some seconds the animation down to 30fps. this problem is only on firefox (i suppose since v57). All others browsers working fine. Have you an idea where is the problem? Thank you

Hello, everyone! I have been struggling with some strange universal camera behaviors. A simple scene with an arcRotateCamera in the air (left) and a universalCamera (right) on the ground, like this: The arcRotateCamera rotates very smoothly. No problem with that. The universalCamera, on the other hand, behaves a bit wierd. The walking (using arrow keys to move about) is pretty smooth, but the panning (click and drag mouse to look around) gets 'sticky' around the center of the screen, especially when looking at more objects, like the screen capture above. By 'sticky' I mean the camera is reluctent to rotate, as if there is a big fps drop. However, engine.getFps() shows no obvious fps drop. I am wondering: 1. If anyone has met similar situations and how to solve it? 2. Does the camera have some sort of inertia property that might result in this? Hope someone can point me to the right direction. Thanks a lot!

Hi, While it should be an easy question, I can't get a fixed movement speed. By "fixed" I mean frame rate independent. According to the manuals it could be done inside update function like this: function update(time, delta) { ... container.body.setVelocityX(speed * delta); ... } .. where "container" is a normal Phaser 3 container and "speed" is predefined. The problem is that I still get noticeably different speeds (for example, small vs big canvas). I check it by measuring a time to get from point A to point B. How can this be improved/fixed? Do I need to turn on something that is turned off by default?

Hi, I'm pretty new to Babylon.js, only started using it a few days ago, but really enjoy it, great work! I encountered some odd behavior with using deterministic lockstep on my setup, when running the example from the Animation page (https://www.babylonjs-playground.com/index.html#DU4FPJ#3) on my laptop's display (120Hz) the animation is twice as fast as on my connected monitor (60Hz) - tried with both Latest and Stable version, with both Cannon and Oimo plugins. My first guess would be that the algorithm is only prepared to handle low FPS, and does not take into account possible higher values. Also tried to dig in to the project on GitHub, but since I'm not that familiar with the structure, sadly I did not find the sources responsible for the behavior. Could some expert please verify my finding? Thank you, keep up the good work, cheers!

I've noticed random drops of FPS in Chrome during a simple movement of a simple sphere. So I made a profile and the drop is clearly visible (suddenly down at 27 FPS). However, I have no idea what caused this to happen. There is nothing unusual to me within this profile. What can I do to dig deeper and eventually solve this problem? I doubt that it this is related with Babylon.js itself nor with my code... It's probably a Chrome issue - and it doesn't happen in Safari.

Hi Guys. I did some test on my notebook, and the phaser doesn't reach 60FPS, just 40FPS. As this said, I've been having some problem working with the ARCADE physics, considering that it works on a 60FPS constant. The following implementation was a try to solve the problem: var game = new Phaser.Game(960, 540, Phaser.CANVAS); var GameState = { init: function () { this.game.forceSingleUpdate = true; this.game.time.desiredFps = this.game.time.fps || 60; ... }, update: function() { this.game.time.desiredFps = this.game.time.fps || 60; this.car.body.velocity.x = 400; } } Would it be a bad practice fulfill this implementation? Would it be more correct to set aside physics and increase position using the delta time?

Hi!, i working in a proof of concept with phaser 3, and i see that is working very fine ! but i want to access to the current frame rate to show it in the game screen. i don't find any examples or documentation about it, there is any way to get the current frame rate in phaser 3? Thanks!!

The playground http://www.babylonjs-playground.com/#CGSXR from http://doc.babylonjs.com/samples/grid_moves runs at 10fps on my Razor Blade laptop with nVidia GTX 1060. Is that normal?