FPS Drop in Cocos2djs - javascript

I aim to create this pattern of game play with one main Lobby Scene and other GameScene opening through window.open.
But even when i try this with empty hello world project to open multiple window, I get restricted due to high drop in FPS.
So basically I need to know is this setup possible in cocos creator , that can even four windows render simultaneously without FPS taking a hit.
Any guidelines if any can be provided to help achieve this will be appreciated.
The game in reference pic i think is made via angular ,maybe thats why it is so smooth even after ten windows.
My team posted issue on cocos2djs but no help :- https://discuss.cocos2d-x.org/t/help-regarding-multi-window-game-in-cocos-creator/42688

After a little bit of dig-in and according to your answer in the comment, I think you can try a different approach "split-screen game". I believe when a new window opened it use the same assets and it drops the FPS.
I don't know what is the best practice for "split-screen game", but I have one suggestion on how to implement it:
Create a prefab template of the main screen.
Create different layers (node) for each screen
Add the prefab to the layer, for example :
layer with 1 screen - 1 prefab
layer with 2 screen - 2 prefabs (duplicate prefab)
etc.
If you move between screens (layers) don't forget to make active false to the last node and destroy all his children.
Also, I think your drop calls it a little bit high for even one window app, Try maybe to check it also.
I hope I helped you.

Related

Disable/enable webGL Context in webGL/three.js

I have a cool project with three.js, and everything work as intended. It displays some mesh in different canvas, and there is my issue.
The project aimed to display many, many canvas, and each one have his own context, and it reach the deadly limit of 16 live webGL contexts. Since it's wanted to display more than that in a page, I'm searching to turn around this restriction, by disabling a context when it's not actually displayed on seen page. When the user will scroll, context will be disabled/enabled so I can put as many context as I want.
I've found this function : renderer.forceContextLoss() and with this one I can force the context disabling. But I didn't found anything to relaunch it. I manage to detect a loss of context, but not its restauration
If you got any idea of how I can achieve that, feel free to give me some tips.
Thanks in advance !
This has been covered elsewhere but the easiest way to make it appear like there are multiple canvases is to just use one instance of three.js, make it cover the entire window, put place holder divs where you want to draw things, and then use element.getClientBoundingRect to set the scissor and viewport for each scene you want to draw in each element
There's an example here.
Here's the answer in StackOverflow from which that sample originates
https://stackoverflow.com/a/30633132/128511
This will use far less memory than using multiple canvases, each of which would need it's own data, it's own shaders, etc...

Can anyone tell me how to get the background animation effect used in Oculus Connect 3 website?

Oculus Connect 3
I know this site was built on react. I want to know more about how to get that background animation and mouse over effect. It's simply awesome to experience. Based on this I will decide to go with React or Angular 2.
If you open your browser's inspection tool (almost always F12) you can see the layout of the webpage. It contains a canvas element with the id "grid". The animation is made using this.
The animation itself looks like a simple node graph, where if you move your cursor the nodes close to the cursor try to stay away from it, thus creating an explosion-like effect.
If your cursor stays fix for 2-3 seconds, the animation starts using a point going randomly across the page instead.
I doubt this animation uses too much of any of the libraries you mentioned in your question, thus deciding which one of these you will be using based on this demo (which let's be honest, max 200 lines of vanilla JavaScript) is like deciding what you eat for breakfast based on the food statistics of Mongolia.
And also, animations like this are what scares off most users. I don't think you can show me any big multimedia or social network site, which has animation close to this.

node-webkit: How can I detect how many screen/monitor user have using?

I'm developing a multiscreen app where I need to detect how many screen user have. Also I need to create that many window and move those window to every screen.
So I basically need a way to know how many screen the user have and also a way to move my window to a specific screen.
Does nodewebkit already have solution for that? If not is there any alternative solution/hacks I might be able to use?
Found the solution as new Screen Geometry added at node-webkit v0.10.2. This will let you listen to Screen Bound, Display add, Display remove events.
Here is the documentation - https://github.com/rogerwang/node-webkit/wiki/Screen
This is added by a very recently new commit on nodewebkit to resolve this issue - https://github.com/rogerwang/node-webkit/pull/2178.
Note - I did not test the code but looks like this is what I was looking for.

Raphael Drag + iPhone = Sad Camera App

Web app here:
http://www.digitaltransitions.com/visualizer/visualizer.html
Main javascript here:
http://www.digitaltransitions.com/visualizer/visualizer.js
Relevant functions are at bottom of visualizer.js, named "dragger" "move" and "up".
I was a programmer a decade ago, and recently took it back up to help my company create a web app that helps our customers visualize how a specific lens will look on a specific camera.
Never mind the info wall (info request form); feel free to put in any garbage entries. Or you can add the function unlock(); at the end of the window.onload and it will bypass the info wall screen and go straight into the app.
I've been very proud to get this far. But now I am majorly stuck and have been banging my head against the wall.
My web app passed testing on Mac_Safari, Mac_Chrome, Mac_Firefox. But it failed testing on an iPhone4s and iPad1; the sliders for focal length (the ##mm gizmo in the top right which changes how "zoomed" the lens is) do not function correctly. When the user grabs the slider some of the time it correctly slides back and forth, but other times it will jump to the far left of the screen at which point the app stops working at all.
Any thoughts would be greatly appreciated!!
By the way, if you were wondering how to create a custom Google Docs Form with validation and a custom confirmation page I got my methodology from here:
http://www.morningcopy.com.au
I'd say your first job is to determine if this your bug, or Raphael's bug. I'd start by switching out your "move" method with an empty method, and see what happens.
Another debugging approach would be to put a fixed-position div down in the corner of the page, and spit the x/y values into it, so you can see in real-time what the numbers look like.
I'd guess that you're running into a mathematical difference in how touch-points are calculated vs. how mouse-cursor-position is calculated.
Based on the hack you added, it looks like Raphael might be sending you a NaN value for Dx?

moving camera effect using jquery

I've to build a website for one real estate developer. Now he wants to put walk through of building/apartment. Is there any way to implement this using jquery like a visitor can see layout of building or apartment as he moves a mouse cursor. Such as moving camera in 3d object. I don't want to use video or swf object. Plz help me.
I'd check out jQuery Virtual Tour.
Here is a demo:
http://www.openstudio.fr/jquery-virtual-tour/
I've actually seen this in production in a couple different places.

Categories

Resources