tranlong021988 Posted January 22, 2017 Share Posted January 22, 2017 hi, I'm making a horror game with Babylonjs, til now this is what I done: http://appsbymekong.com/flashdemo/maze/ I have some problems and need some advices: - I'm using VirtualJoystick Camera, if you try my demo in mobile browser, you will see some time laggy when interact with screen (pointerdown). Don't know what happen and not sure it's caused by browser or VirtualJoystick Control. I did apply some solutions (https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away), but issue not go away. - VirtualJoystick Camera , as tutorial here: http://doc.babylonjs.com/tutorials/how_to_use_virtualjoystickscamera , showing virtual joystick on screen canvas(left and right), don't know why it's not display in my game. May be I miss something as usual ? - Anybody know how to disable smooth rotating BJS Camera ? setting .inertia = 0 seem slow down and not exactly disable smooth rotating. Any helps are very appreciated. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 22, 2017 Share Posted January 22, 2017 What the heck, I'll try a useless reply... @tranlong021988 - you still have a .7 inertia in your maze. *shrug* Cool maze and scary zombie-thing, too! http://www.babylonjs-playground.com/#OORFZ#39 I don't know if that can help... but it is a virtual joystick... (one thumb area)... in-use with an arcRotateCam. Notice it uses a CUSTOM vj._onPointerMove function. We sometimes call this "hijacking" (of _onPointerMove func). Someone borrowed that function from the framework "official" virtual joystick code, and "brought it forward", so they could hack and experiment with it... in the playground. Later, I added a 15-second timer. The "vjcanvas" is an extra HTML canvas element that is added as the last element in the document's <body>. The size of this extra <canvas> is window.innerHeight by window.innerWidth... so it is BIG. It is SO big... that when you run VJ's in the playground, that canvas covers the editor area on the left of the playground. IF that DOM node (html) doesn't get deleted somehow... you can't type in the playground editor anymore. The added transparent canvas... is blocking the editor and all the playground GUI buttons. (sucks) SO, the above playground... keeps the vjcanvas on-screen for 15 seconds, and then releases the extra canvas. (returns to normal). IF you get in trouble anyway... where the 15 second timer fails... you can open your browser dev tools, choose document "inspector", find the last <canvas> element in the document, and highlight/delete it. In fact... to "get clean"... delete ALL <canvas> elements that happen just before </body> (at the bottom of the document). Delete those add-on canvases... as needed. My 15 second timer works well, though. You get 15 seconds to goof around with the "stuff" in _onPointerMove(), and then enjoy the automatic exit-to-safety. Soon, the NEW Virtual Joysticks will be coded... using our new Canvas2d system... instead of the DOM <canvas> thing. Canvas2d never blocks the playground editor... unless you ORDER it to do so. Hope this helps. Hopefully, others will comment with REAL information and help. lincolnberryiii 1 Quote Link to comment Share on other sites More sharing options...
tranlong021988 Posted January 22, 2017 Author Share Posted January 22, 2017 After updating to newest version, the Joysticks appeared finally !! Now just two things I can not make out: - Disable smoothing camera. - Avoid virtual joystick laggy (Already check Retail demo with virtual joystick camera, it's perfect, may be some miracle in there). Anybody help. Quote Link to comment Share on other sites More sharing options...
tranlong021988 Posted January 23, 2017 Author Share Posted January 23, 2017 @Wingnut : I tried setting inertia = 0 but it just slow down camera not disable smoothing. You can check here (inertia = 0 upated) http://appsbymekong.com/flashdemo/maze/ And I notice that VJCamera just laggy(delayed) when right joystick and left joystick using same time, may be I miss something when setting up CSS. The Retail Demo VJC work fine without laggy so it's not VJCamera fault. I have in-action record here, you can see laggy when taping screen right side. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 23, 2017 Share Posted January 23, 2017 Cool, thanks for video, T. I don't have many ideas. I think you will need to simplify code, for troubleshooting. When you disconnect the monster chase, does the camera improve? What is the use of fpcam.position.y=5; in the render loop? Can you turn off window.setInterval(checkRayCollide,2000); ? Perhaps try turning OFF camera collision? *shrug* When not using left joystick... is right joystick better? LOTS better? Only a LITTLE better? Thoughts? I don't see any obvious problems. Maybe others can see better. Fenomas once said that if we learn to do "profiling", (part of F12 browser dev tools), it is easy to see what is being "laggy"... but I have never done a profiling. It would be great if we could reproduce this issue... with a playground scene. hmm. Could you ZIP your entire project, and offer it to us for download? I'll keep thinking and studying the code. If you could make a special version... with many "extras" removed... and camera still has problem... that would help. Easier to troubleshoot/find problem. You know. Lots of code... sometimes hurts eyes. We will find this issue, even if it kills us. We shall not be defeated! tranlong021988 1 Quote Link to comment Share on other sites More sharing options...
tranlong021988 Posted January 23, 2017 Author Share Posted January 23, 2017 @Wingnut hi, thank you for your detail instruction, I follow it and finally figure out where problem came from. It's scene.workerCollisions = true; That so weird and I have no idea why it cause camera lagging. But anyway, setting it to false saved my day. Feeling that it make my phone hotter a little bit, but not important than the final problem: Disable Camera Smoothing. With this case, I have follow this discussion : But it seem that .getRightJoystick().setJoystickSensibility function is invisible with me. (index):198 Uncaught TypeError: fpcam.getRightJoystick is not a function Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 23, 2017 Share Posted January 23, 2017 http://www.babylonjs-playground.com/#1H4KMF#10 Wingnut experiments. This playground has a 15-second timer, again. In line 16, I try that .getRightJoystick()... returns undefined or broken or something. BUT... inside the 15 second "release" function at line 38, I try it again, and it works. Sort of a "late binding" thing, perhaps. I'm not very intelligent on these subjects, but I thought I would tell you what I discovered... and let you play with this playground, if you wish. Try not to be using yellow joystick over canvas, or blue joystick over editor... WHEN the timer ends. (It can cause some graphics residue, and you might need a full reload of the scene... to remove the extra joystick rings). Learning learning learning. VJ's are weird. That darned .inertia situation... that's just strange. I think the camera is over-riding our inertia settings... because of this "late binding" thing. The camera is going active "late"... and when it does, it uses the camera's default .inertia... which over-rides our inertia = 0 setting. Strange. You don't even need to USE the VJ's at all... to see the late binding. Just run it... and line 16 shows undefined. 15 seconds later, line 38 says "here's your right joystick, as you asked." Weird. Just plain weird. tranlong021988 1 Quote Link to comment Share on other sites More sharing options...
tranlong021988 Posted January 23, 2017 Author Share Posted January 23, 2017 @Wingnut well, too much weird things. Now I have to popup visitor/player that "Wait 15 seconds because your Virtual Joystick having business". Anyway, thank you too much and sorry for my bad English skills, I did use Google Translate for almost what you say. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 23, 2017 Share Posted January 23, 2017 It probably works with 1/100th second, too. http://www.babylonjs-playground.com/#1H4KMF#12 See line 43? 10/1000th of a second. So, you can turn-off lines 39 and 40, and do all VJC adjusting inside of onVJCready() function. *shrug* Strange, but it works. Notice I used inputs.attached.virtualJoystick. I rarely use camera.inputs. Might be wrong. I'm doing lots of guessing. Remember, line 39 turns-off BIG extra canvas. If it gets stuck ON... it blocks playground editor/buttons. Part of the fun. PS: Your English is fine. You do it well. tranlong021988 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 23, 2017 Share Posted January 23, 2017 Oh wait... I have an idea. scene.executeWhenReady() http://www.babylonjs-playground.com/#1H4KMF#13 Seems to work. I still have 15 second timer to turn off vjCanvas. But look at console. Good right joystick report from scene.executeWhenReady() (line 38) Okay... we have progress. Now, timer is ONLY used in playground. You can delete lines 41-47 for home project. Do all VJC adjusting inside scene.executeWhenReady func. Workable? I hope so. I tried setting VJC.inputs.attached.virtualJoystick.camera.inertia = 0; ...inside of scene.executeWhenReady(). Failed. hmm. Darn. Also, in playground, scene.executeWhenReady() causes "Loading assets...Please wait" to stay ON. It is normal, and abnormal, too. tranlong021988 1 Quote Link to comment Share on other sites More sharing options...
gryff Posted January 23, 2017 Share Posted January 23, 2017 6 hours ago, tranlong021988 said: Feeling that it make my phone hotter a little bit Hi @tranlong021988 ; as @Wingnut says, "Your english is fine" I can't help much with the VJ camera issue, but I do have a question for you. In your game, you have this animated "zombie" character that follows you around - how many bones does it have? On my desktop PCs, I normally have around 32 bones which would put a strain on mobile phone rendering. @JCPalmer, I believe, recommends a number of bones around ~20 for mobile devices. And as that character follows you around, are you running some fancy "A star" pathfinding code? Could those features also be slowing your camera responses as well as making your phone a little warmer ? cheers, gryff Wingnut 1 Quote Link to comment Share on other sites More sharing options...
tranlong021988 Posted January 24, 2017 Author Share Posted January 24, 2017 @Wingnut darn. how can I forget that simple function ? .executeWhenReady(). . five days headache, arrgg... @gryff: Yes, I know there is some limitation with mobile device thus I do a lot of optimization as possible. Merge meshes , freeze matrix, freeze material, small texture, low poly mesh. I use a 2d collision map for ray checking, in web worker. Each 2 seconds, I launch a ray from player position to zombie position, separated thread so I don't think it slow down anything to much. If ray hit the wall, active navigation mesh AI system (a wonderful project from here) and then zombie finding you. If ray not hit any walls, just make him go straight to you with some simple mathematics. The big problem is player-wall collision, I though I can speed it up by using web worker option (tut here), but actually, it caused VJC lagging, no idea why. Since switching to none worker option (set it to false), I can notice RAM percent consume a little bit, and my phone go warmer but it just feeling by hand and not test with many devices yet. And about that zombie guy, he has 41 bones and I'm trying to optimize by removing some useless bones. Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.