Search the Community

Showing results for tags 'firefox'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 49 results

  1. Hello everyone, i am new here, and would like to ask my first question! I have made a 2d canvas game using mainly CreateJS, and GSAP. For various reasons, i would like to be use Firefox as a browser, but i have had some performance issues that couldn't surpass. So i decided to check a webgl based rendering library such as pixiJS. I have made a quick test page to see if i could get smooth tweening using webgl rendering vs canvas based rendering. I would expect better framerates using webgl, but the truth is that i get lower framerates and really jerky motion. All the articles and examples i've read about the past couple of days were saying the exact opposite. So what am i really missing? Is it Firefox's problem? Is it that i use GSAP for tweening? Is my example code missing anything essential? You could check my quick demo here : http://jsfiddle.net/thvphuub/3/ And i would suggest to run the two versions in fullscreen to see the FPS yourself using the two following links : Using canvas : https://jsfiddle.net/thvphuub/2/embedded/result/Using webgl : https://jsfiddle.net/thvphuub/3/embedded/result/ Actually the above runs quite smoothly using canvas on Firefox...:-S Any insight would be great.Thanks in advance!
  2. Here is my simple code: <html> <head></head> <body> <canvas id="renderCanvas"></canvas> <script src="jquery-2.1.4.min.js"></script> <script src="babylon.2.2.max.js"></script> <script> var canvas = $("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 2, 10, new BABYLON.Vector3(0, 0, 0), scene); scene.activeCamera.attachControl(camera); engine.runRenderLoop(function () { scene.render(); }); </script> </body></html>When I open that with jQuery and BabylonJS in the same directory, I get this error in Firebug: It works in neither Firefox nor Chrome. WebGL does otherwise work. I can, for example, run https://videos.cdn.mozilla.net/uploads/mozhacks/flight-of-the-navigator/ and the Three.js examples. I get this same problem on both my Windows and my Mac. Anyone have any idea what's wrong? Here is my Firefox-configuration on Windows:
  3. Hello: First of all, I am glad to have discovered Phaser, and to be part of this community Phaser is a phenomenal library, and I think I am going to have a great time working with it. I am currently programming the initial screen of a game. I wanted to make a wobbly title (I am using a rope for it) with falling silhouettes behind it and a moving background. The code I am using is this: fondointro = game.add.tileSprite(0, 0, game.world.width, game.world.height, 'bgintro'); fondointro.fixedToCamera = true; var turistasintroTotal = 50; for (var i = 0; i < turistasintroTotal; i++) { var s = game.add.sprite(game.world.randomX, -200, 'Tourist'+Math.floor((Math.random()*7) + 1)); game.physics.arcade.enable(s); s.body.velocity.y = Math.floor((Math.random()*500) + 100); s.body.angularVelocity = Math.floor((Math.random()*110) - 50); s.tint = 0xFFFFFF * Math.random(); s.alpha = 0.5 s.autoCull = true; s.checkWorldBounds = true; s.events.onOutOfBounds.add(resetSprite, this); } var count = 0; var length = 918 / 20; var points = []; for (var i = 0; i < 20; i++) { points.push(new Phaser.Point(i * length, 0)); } ropeTitle = game.add.rope(2000, this.game.world.centerY, 'title', null, points); ropeTitle.scale.set(0.8); ropeTitle.updateAnimation = function() { count += 0.1; for (var i = 0; i < this.points.length; i++) { this.points[i].y = Math.sin(i * 0.5 + count) * 20; } };Strange thing: When I try it in Firefox it works like a charm, but when I try it in Chrome, the title appears with an alpha of 50% - even if I didn't specify that. Why does this happen?
  4. Hi, new to the forums I've got an issue drawing images on the canvas on Firefox and IE. I created an array of Sprites (Floor Tiles), iterated through them and placed them right next to each other. When I translate the canvas (platformer style), everything draws perfectly EXCEPT on Firefox and IE. Both browsers seem to draw each sprite with a 1 pixel gap between them, but only when I'm calling ctx.translate(). The other browsers draw my floor tiles appropriately. Wondering if anybody ran into a similar issue. I'm running the latest version of each browser, and rounding sprite position coordinates when calling drawImage(). Again, this pixel gap issue only happens on Firefox and Internet Explorer. Thanks! Chrome / Opera / Chrome Mobile / Opera Mobile / Safari Mobile (During ctx.translate) Firefox / Internet Explorer (During ctx.translate)
  5. It is using WebGL in both cases, and I have turned on "use hardware acceleration" in Firefox (latest version). I see the same difference in the mobile versions of Chrome and Firefox I made my site again from scratch when 3.0 came out, and the version of the site which uses the old Pixi still performs similarly in both browsers. Is there an acknowledged difference in Pixi 3.0's ability to perform in Firefox vs. Chrome?
  6. Firefox process allocates 1GB of RAM

    While developing my game, I refresh the same page many times. Though it doesn't have some complex tasks to do except Timer events, the Firefox process gets too big in allocated memory, around 1GB after 10 or more refreshes of the page. I am sure it is my game since I have it loaded alone in Firefox. What do I miss to do or should I do to clear memory that the game allocates, after each refresh? Is this connected with the browser or is there some Phaser code that is good to be implemented?
  7. Hello, First I want to say that I really love Babylon.js. It has made learning WebGL and 3D graphics much much easier. I have two questions regarding imported meshes. I have managed to import and load a mesh I created in Blender, however, the mesh itself only seems to appear in Chrome and IE. It doesn't appear in Firefox at all. When I look at the console, I get this error: babylon.js:3 BJS - [09:46:46]: Valid manifest file not found. http://www.cosmiqcloud.com/universe/cosmiqlogo2.babylon.manifest?1423583206131 Failed to load resource: the server responded with a status of 404 Scene & textures will be loaded directly from the web server. I wanted to make sure this wasn't something in my code and I am not really sure what a manifest file is. My second question is: How do I make the imported mesh reflect on a mirrored surface? Any insight you can give would be very helpful. Thank you. My code is below and here is the link to the live demo is http://www.cosmiqcloud.com/universe/ <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); // Setup environment var light = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(10, -20, 0), scene); light.position = new BABYLON.Vector3(-160, 240, 1); light.diffuse = new BABYLON.Color3(1, 1, 1); light.specular = new BABYLON.Color3(1, 1, 1); light.intensity = 0.7; var omnilight = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 1, 60), scene); omnilight.position = new BABYLON.Vector3(0, 35, 310); omnilight.diffuse = new BABYLON.Color3(1, 1, 1); omnilight.specular = new BABYLON.Color3(1, 1, 1); omnilight.intensity = 1.9; var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(25, 0, -170), scene); //var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); scene.activeCamera.attachControl(canvas, true); camera.checkCollisions = true; camera.applyGravity = true; camera.ellipsoid = new BABYLON.Vector3(2, 2, 2); //Physics scene.enablePhysics(); scene.setGravity(new BABYLON.Vector3(0, -60, 0)); scene.collisionsEnabled = true; // Meshes var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16.0, 20.0, scene); sphere2.position.x = 0; sphere2.position.y = 4; sphere2.material = new BABYLON.StandardMaterial("texture1", scene); sphere2.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); sphere2.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 2.0}); sphere2.checkCollisions = true; sphere2.material.alpha = .5; var sphere3 = BABYLON.Mesh.CreateSphere("Sphere2", 16.0, 70.0, scene); sphere3.position.x = 187; sphere3.position.y = 35; sphere3.position.z = 150; sphere3.material = new BABYLON.StandardMaterial("texture1", scene); sphere3.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); //sphere3.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 0.0}); sphere3.checkCollisions = true; var knot = BABYLON.Mesh.CreateTorusKnot("knot", 7, 2, 128, 64, 2, 3, scene); knot.position = new BABYLON.Vector3(-19, 10, 16); //knot.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 1.0}); knot.checkCollisions = true; knot.material = new BABYLON.StandardMaterial("texture3", scene); knot.material.diffuseColor = new BABYLON.Color3(1, .634, .7); knot.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); //Animations var animationKnot = new BABYLON.Animation("myAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); // An array with all animation keys var keys = []; keys.push({ frame: 0, value: 4 }); keys.push({ frame: 20, value: 8 }); keys.push({ frame: 100, value: 7 }); keys.push({ frame: 360, value: 5 }); keys.push({ frame: 460, value: 1 }); animationKnot.setKeys(keys); knot.animations.push(animationKnot); scene.beginAnimation(knot, 0, 100, true); //Imported mesh var cosmiqLogo = BABYLON.SceneLoader.ImportMesh("Cosmiq Logo", "", "cosmiqlogo2.babylon", scene, function (newMeshes) { // imported mesh attributes cosmiqLogo = newMeshes[0]; cosmiqLogo.position.y = 54; cosmiqLogo.position.z = 320; cosmiqLogo.scaling.x = 14.2; cosmiqLogo.scaling.y = 14.2; cosmiqLogo.scaling.z = 14.2; cosmiqLogo.material = videoMat; cosmiqLogo.emissiveColor = new BABYLON.Color3(1, 1, 1); cosmiqLogo.ambientColor = new BABYLON.Color3(1, 0.2, 0.7); }); //Skybox var skybox = BABYLON.Mesh.CreateBox("skyBox", 10000.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skybox.infiniteDistance = true; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial; //Video material var videoMat = new BABYLON.StandardMaterial("textVid", scene); videoMat.diffuseTexture = new BABYLON.VideoTexture("video", ["textures/alien_ocean.mp4"], 256, scene, false); videoMat.backFaceCulling = false; // Ground var plane = BABYLON.Mesh.CreateBox("box", 6.0, scene); plane.position.y = -10; plane.scaling.x = 240; plane.scaling.z = 240; plane.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0, friction: 300, restitution: 1.5}); plane.checkCollisions = true; // Materials var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene); simpleMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);//Red //Creation of a mirror material var mirrorMaterial = new BABYLON.StandardMaterial("texture4", scene); mirrorMaterial.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4); mirrorMaterial.reflectionTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true); mirrorMaterial.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -10.0); mirrorMaterial.reflectionTexture.renderList = [sphere2, skybox, knot, sphere3, cosmiqLogo]; mirrorMaterial.reflectionTexture.level = 0.6; //Sphere meshes sphere2.subMeshes = []; var verticesCount = sphere2.getTotalVertices(); sphere2.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere2)); sphere2.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere2)); sphere2.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 1800, 2088, sphere2)); //Applying materials plane.material = mirrorMaterial; //Music // Load the sound and play it automatically once ready var music = new BABYLON.Sound("Music", "Beautiful.mp3", scene, function () { // Sound has been downloaded & decoded music.play(); }); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script>
  8. Hello, I am building a game engine using Pixijs & SATjs and Tiled to construct maps. For optimization reason, I am rendering layers (DisplayObjectContainers) that contain tilemap sprites on RenderTextures with a following code: bakeLayer: function(layer) { var renderTexture = new PIXI.RenderTexture(this.width, this.height); var sprite = new PIXI.Sprite(renderTexture); renderTexture.render(layer); sprite.alpha = layer.alpha; sprite.level = layer.level; sprite.position.x = layer.position.x; sprite.position.y = layer.position.y; sprite.parallax = layer.parallax; sprite.name = layer.name; sprite.tilemap = layer.tilemap; sprite.collisionResponse = layer.collisionResponse; sprite.baked = true; return sprite;},Now, in Chrome & Opera everything works fine: However, in the Firefox I am getting the following result: Now, in PIXI documentation I've read that "All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded otherwise black rectangles will be drawn instead." However, if that was the case, neither Chrome nor Opera should have rendered it correctly. For the record, if I turn off the baking option, everything works fine in the Firefox as well. A blue pipe is also baked and is on the top of the level display object container. Curious thing is that it's the only layer that is baked (rendered on rendertexture) that gets displayed correctly...
  9. hi buddies, i've experiencing some lagging when i played my game prototype using firefox mozilla, but in chrome is really smooth? any idea why? any tips to enhance performance in firefox?
  10. RetroFont and WebGL bug (Firefox only?)

    Hey! In CANVAS mode this code works fine: this.scoreFont = this.add.retroFont('scoreFont', 45, 64, '0123456789', 10, 0, 0);this.scoreFont.text = '0';this.scoreDisplay = this.add.image(20, 20, this.scoreFont);However, with WEBGL the third line throws an error: Error: WebGL: texImage2D: null ImageData that appears to come from this function: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);(from PIXI.WebGLRenderer.prototype.updateTexture). And the RetroFont doesn't show. Curiously, this WORKS in Chrome, but doesn't work in Firefox 35. Bug or am I doing something wrong?
  11. Text cut off in Firefox 32 (Mac)

    Hi guys, I have a strange issue with 2.0.7 and still also in 2.1.1. In Firefox the text gets cut off at the top, while Chrome, Safari and even IE don't have any issues with it. I have attached 2 screenshots one from firefox and one from chrome for comparison. The code is straight forward: //txt Score txtScore = game.add.text(15,game.world.height-50,0); txtScore.font = 'Oswald'; txtScore.fontSize = 30; txtScore.fill = "#FFF"; txtScore.align = "right"; txtScore.fixedToCamera = true;You can even check out the game at https://yolotrain.oebb.at (facebook login required, online is still Phaser 2.0.7) Do you have any clue why this is happening? As far as I can see it has something to do with the font, because when I switch to e.g. Verdana everything is fine. It seems the font is aktually larger than 30!?. However any idea how to fix that? Thank you and regards, Clemens
  12. Locked at 30fps on Chrome

    Hello, When I ran my code on Chrome today I suddenly found that it was locked at 30fps. I was confused because I hadn't changed anything since it last ran at 60fps so I tried Firefox which continued to run perfectly at 60fps. My only guess is that Chrome updated to lock the fps or something. Any ideas? (I am using Pixi 1.6.1 and Chrome Version 36.0.1985.125 m which is the latest) Crowbar
  13. Hello everyone, I've been having issues the last couple of days, because the arcade physics seem to be working unreliably in firefox. I have had no problems and no failures with it in Chrome. In firefox every now and then the game lags (more of a stutter, very short freeze) and the arcade-physic collision detection fails. I can walk through walls, fall through the ground and jump through ceilings. Looking at the framerate reveals a small drop in framerate whenever this happens. I also noticed that in Chrome the framerate stays more stable and the problem never happened so far. Looking through the issue tracker on github also didn't reveal anything in this direction. Can anyone help me with this?
  14. I've been trying to squash an annoying situation where the full screen mobile template messes up on Firefox on Android. I found another game that's set up basically as mine: http://gamepyong.com/ints/ints.php It has the same problem. I'm having this issue in both 2.04 and 2.05. SO - what's the issue? Well, the javascript seems to think the game, or the webpage is/should be larger than the game's height. So it pushes the game down 10/20 pixels, and then if you touch that area you can scroll down. Since you then can scroll down, the page is never stationary; you can touch and drag the page which ruins many games basically. I'm seeing this problem on a Samsung Galaxy Tab, SM-T310 Android 4.2.2 Any idea on where to start to troubleshoot this? Pic of the problem, notice the black bar under the nav bar, it should not be there:
  15. Max texture size for WebGL?

    Hi all, Having a weird problem where a spritesheet animation appears as a black box in Firefox when rendering with WebGL. When I switch to Canvas, the spritesheet plays. I'm assuming I'm over the max texture size? (I have a giant, 32 frame animation that weighs in at a colossal 4560 × 4800. I know, I know, it's ridiculous, but I need to run basically a full screen animation for a few seconds). I tried switching to a 'power of 2' size (e.g. 4225 x 4225) but this still doesn't work. Can anyone confirm that I'm barking up the wrong tree? Nick
  16. Poor performance in Firefox on OSX?

    Here's a dilly of a pickle I'm having... I'm using CANVAS as my renderer. The game I'm building works great on Chrome but on Firefox, specifically for OSX, I'm having issues. For instance, a 4GB RAM Intel Core i3 PC running Firefox runs great but a 8GB RAM Intel Core i5 Macbook Pro running Firefox runs laggy... I've tried switching to bitmap fonts and reduce other expensive operations but still... Is there any one who has experienced this or who knows what's going on? (Please spare me the 'PCs are better' jokes ) Nick
  17. Gamepad

    Hello Everyone, I'm new to both Phaser and this community. I was wondering if I could get some helpful tips from the more experienced members. As of right now I'm trying to implement Gamepad support for my game and I came across this example on the website: http://examples.phaser.io/_site/view_full.html?d=input&f=gamepad.js&t=gamepad Before I implemented something similar to this, I wanted to test it to see if it works. However, no matter what I do I can't seem to get it to work. I tried it on Chrome stable channel which I didn't have any luck with. It didn't recognize that the controller was connected. So I decided to try it on Firefox version 29. It recognized that the controller was connected however I could not move the character at all. I then also decided to get Chrome dev channel version 37 and I had the same outcome as Firefox version 29. It detects the controller, it just does not react to input. I am using a Xbox 360 wireless controller hooked up to my windows PC with the provided USB receiver. I hope I'm just making a simple mistake somewhere. If anyone could give me some feedback that would be awesome. Thank you for your time! -Denaszune
  18. pixijs, how to distribute it?

    hi everybody, I'm developing a browser game with pixijs, I have finished 90%. My problem is: as I distribute the game in the Apple Store or google play market. In this forum, I read that you use cocoonjs, but I don't want use it, because I have to change many things in the project (for example: canvas render, google font, etc...) My game runs fine in chrome and firefox browsers (mobile and desktop) at 60 FPS. I tried to compile the project with apache cordova (PhoneGap), but it run at 12 FPS. This my question on stackoverflow: http://stackoverflow.com/questions/22011274/why-performance-webgl-of-phonegap-is-different-from-firefox-or-chrome I can not compile project with another embedded webview in phonegap, because it is very difficult, there is no documentation and is still unstable!! chrmome webview for phonegap: https://github.com/thedracle/cordova-android-chromeview Firefox webview for phonegap: https://wiki.mozilla.org/Mobile/Projects/GeckoView Any idea? Please give me some advice...sorry form my english. Marco.
  19. Chrome framerate half of Firefox

    I've been just doing some simple tests on my server just to get things running. When I run it in Firefox I'm getting 60fps When I run it in Chrome however I get 24fps. http://mirvini.com/phaser/ Any ideas why my chrome browser would be going slower? I don't experience this problem with other browser games, including other phaser games. The only extension I have active is Adblock, which I disabled for my site Are there any plugins that are known to cause problems?
  20. Hi there I've working on very simple game. I use PIXI.AssetLoader to load sprite sheets via associated with .json files. This is example star.json {"frames": {"star0000":{ "frame": {"x":0,"y":0,"w":116,"h":110}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":116,"h":110}, "sourceSize": {"w":116,"h":110}},"star0001":{ "frame": {"x":116,"y":0,"w":116,"h":110}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":116,"h":110}, "sourceSize": {"w":116,"h":110}},"star0002":{ "frame": {"x":0,"y":110,"w":116,"h":110}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":116,"h":110}, "sourceSize": {"w":116,"h":110}},"star0003":{ "frame": {"x":116,"y":110,"w":116,"h":110}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":116,"h":110}, "sourceSize": {"w":116,"h":110}},"star0004":{ "frame": {"x":0,"y":220,"w":116,"h":110}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":116,"h":110}, "sourceSize": {"w":116,"h":110}},"star0005":{ "frame": {"x":116,"y":220,"w":116,"h":110}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":116,"h":110}, "sourceSize": {"w":116,"h":110}},"star0006":{ "frame": {"x":0,"y":330,"w":116,"h":110}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":116,"h":110}, "sourceSize": {"w":116,"h":110}}},"meta": { "app": "Adobe Flash CS6", "version": "12.0.2.529", "image": "star.png", "format": "RGBA8888", "size": {"w":256,"h":512}, "scale": "1"}}It works fine on Chrome, iOS Safari, Android browsers but on desktop Firefox got error: SyntaxError: JSON.parse: unexpected character pixi.dev.js:10519What's the problem? Shall I remove specific characters from .json file or change encoding? Please help
  21. MouseClick event on FireFox

    Mouse click event is not working on Mozilla FireFox. It is not picking any mesh. But if I click on empty area it raises the event. It's working fine on Chrome and Internet explorer 11. Code: renderCanvas.addEventListener("click", function (evt) {// We try to pick an objectvar pickResult = newScene.pick(evt.offsetX, evt.offsetY);// if the click hits the ground object, we change the impact positionif (pickResult.hit) {document.getElementById('status').innerHTML = pickResult.pickedMesh.name;}elsedocument.getElementById('status').innerHTML = 'Nothing Selected';});You can check it here
  22. Unreal JavaScript - demo now out

    "At the 2013 Game Developers’ Conference, Alon and I from Mozilla and Josh Adams from Epic Games presented a talk called “Fast and Awesome HTML5 Games”. We surprised people by showing off Unreal Engine 3 running in Firefox — compiled from C++ source with Emscripten, running smoothly and efficiently. Today, Epic is making the Epic Citadel demo available, so that you can try it out for yourself. For best results, it needs a recent Firefox Nightly (Firefox 23 or better). However, because the core technologies are just standard web technologies, it will run in Firefox 20 (the current released version) — but with some performance degradation and a lack of Web Audio-dependant audio effects. We’ve had success in running it in other browsers, but it’s somewhat hit and miss – it heavily depends on the quality of the WebGL implementation, memory management, and JavaScript engine. Now that the demo is available, we expect that they will fix any remaining issues quickly." http://blog.bitops.com/blog/2013/05/01/unreal-javascript/
  23. Hi. I creating game on the base of css 3d transforms and some js as a proof of concept. This is game field: https://dl.dropboxusercontent.com/u/20810772/model/field.html In the -webkit- everything fine. But in the -moz- (Firefox 19) z-index have priority to 3d-transforms. So last element in the DOM always will overlap first element no matter what 3d positions they have. Is there any way to fix it? Set z-index for every element and recalculate them for any rotation is my worst nightmare. You may rotate scene with keyboard arrows. With all best regards.
  24. FPS handling

    I'll start with an issue I'm having and after that I will pass to a more generic thought. I'm using this game loop structure, using requestAnimationFrame: requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { window.setTimeout(callback, 1000/60); };})();gameloop=function(){ //Here I do my calculations and drawings //I do this in order to calculate FPS thisLoop=new Date; var fps=1000/(thisLoop-lastLoop); lastLoop=thisLoop; requestAnimFrame(gameloop); }It works fine both on Chrome and IE, at a steady 60 fps pace. But when running on Firefox, FPS counting goes over 60 (it sets around 65) and the gaming experience is a lot worse, not smooth at all because I suppose the screen might be dropping some frames. I read of setting a time-interval alongside the requestAnimFrame call but I don't know if it's the solution. Any thoughts? Having said that, a more broad question. MAKING GAME LOGIC FPS INDEPENDENT. This has been taking some of my time lately. I've tried a couple of methods to do that. In the first one, I use that fps data I'm getting to do the pertinent speed corrections every cycle with fresh data. Then I tried to do the same but using a mean value calculated over some cycles. I'm getting buggy results either way (what else!). Is this the correct approach? Which is the lowest FPS you handle in your games?