Search the Community

Showing results for tags 'firefox'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 52 results

  1. Hi all. I'm getting the following error when trying to create a Pixi renderer using autoDetectRenderer in Chrome and Firefox: gl.disable is not a function at WebGLRenderer._initContext at new WebGLRenderer at Object.module.exports.Object.assign.autoDetectRenderer I'm using Pixi as part of a much larger, complex framework and haven't tried taking the whole thing apart to see what's causing the problem yet; I was hoping that there might be an easy Pixi-related solution before I get to that... From having a poke around in the Pixi source code I can make the error go away by adding a small tweak: /** * Creates the gl context. * * @private */ WebGLRenderer.prototype._createContext = function () { var gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions); = gl; // *** adding the following line makes the error go away *** if (!gl.disable) =; // ********************************************************* if (!gl) { // fail, not able to get a context throw new Error('This browser does not support webGL. Try using the canvas renderer'); } this.glContextId = WebGLRenderer.glContextId++; = this.glContextId; gl.renderer = this; }; While this works, I'm not entirely sure why and obviously I'd rather not rely on hacked-around code in production. So: is there an obvious/known reason this is happening that I can fix? Or, alternatively, will using the above fix break anything important? Unfortunately I can't share a link because the project is pre-alpha still; I might be able to strip out enough to make a useful demo page but it'd be a big undertaking - I'm crossing my fingers and hoping there's something quick and obvious I can fix! Any help much appreciated. Cheers, Tom
  2. My game I've been working on is an fps trainer thing. But it is having problems on firefox. Here's the game: (press m to access the menu and f for fullscreen) Right now it has a problem on firefox where if you click and drag, then the sensitivity goes berserk. Try it out. Chrome ignores click and drag. Does anyone know how to stop this? Also, I'm getting fps drops in firefox for some reason. It says 600-700 potential fps but still drops below 60 every minute or so. Weird. Also, safari and ie don't support pointer lock. Is there a way around this? Thanks for any help.
  3. Hello, So I am trying to create a water texture for my scene. I loaded the waterMaterial.js, water.fragment.fx, and the vertex.fragment.fx files with a bump map into my water directory. However, when I try to load my game inside firefox and chrome, the console says "WaterMaterial is not defined". I was following a tutorial and downloaded the example files and their file has the same error. I am using the newest version of Babylon js and I have no idea why this is happening. Do you know why this could be happening? I checked my code and I don't see anything wrong. Maybe there is something I am missing. Thanks for your help in advance! here is the code for the water plane. // Water var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false); var water = new BABYLON.WaterMaterial("water", scene, new BABYLON.Vector2(512, 512)); water.backFaceCulling = true; water.bumpTexture = new BABYLON.Texture("Water/bump.png", scene); water.windForce = -5; water.waveHeight = 0.2; water.bumpHeight = 0.05; water.waterColor = new BABYLON.Color3(0.047, 0.23, 0.015); water.colorBlendFactor = 0.5; water.addToRenderList(skybox); water.addToRenderList(ground); waterMesh.material = water; // waterMaterial.js var BABYLON = BABYLON || {}; //********************** //water material //******************** (function () { BABYLON.WaterMaterial = function (name, scene, light) { = name; this.TextureBump = "textures/water_river.jpg"; = name; this.light = light; this._scene = scene; scene.materials.push(this); this.bumpTexture = new BABYLON.Texture(this.TextureBump, scene); this.bumpTexture.uScale = 2; this.bumpTexture.vScale = 2; this.bumpTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE; this.bumpTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE; this.reflectionTexture = new BABYLON.MirrorTexture("reflection", 512, scene, true); this.refractionTexture = new BABYLON.RenderTargetTexture("refraction", 512, scene, true); this.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0); this.refractionTexture.onBeforeRender = function() { BABYLON.clipPlane = new BABYLON.Plane(0, 1, 0, 0); }; this.refractionTexture.onAfterRender = function() { BABYLON.clipPlane = null; }; this.waterColor = new BABYLON.Color3(0.0, 0.3, 0.1); this.waterColorLevel = 0.2; this.fresnelLevel = 1.0; this.reflectionLevel = 0.6; this.refractionLevel = 0.8; this.waveLength = 0.1; this.waveHeight = 0.15; this.waterDirection = new BABYLON.Vector2(1.0, 0); this._time = 0; }; BABYLON.WaterMaterial.prototype = Object.create(BABYLON.Material.prototype); // Properties BABYLON.WaterMaterial.prototype.needAlphaBlending = function () { return false; }; BABYLON.WaterMaterial.prototype.needAlphaTesting = function () { return false; }; // Methods BABYLON.WaterMaterial.prototype.getRenderTargetTextures = function () { var results = []; results.push(this.reflectionTexture); results.push(this.refractionTexture); return results; }; BABYLON.WaterMaterial.prototype.isReady = function (mesh) { var engine = this._scene.getEngine(); if (this.bumpTexture && !this.bumpTexture.isReady) { return false; } this._effect = engine.createEffect("Water/", ["position", "normal", "uv"], ["worldViewProjection", "world", "view", "vLightPosition", "vEyePosition", "waterColor", "vLevels", "waveData", "windMatrix"], ["reflectionSampler", "refractionSampler", "bumpSampler"], ""); if (!this._effect.isReady()) return false; return true; }; BABYLON.WaterMaterial.prototype.bind = function (world, mesh) { this._time += 0.0001 * this._scene.getAnimationRatio(); this._effect.setMatrix("world", world); this._effect.setMatrix("worldViewProjection", world.multiply(this._scene.getTransformMatrix())); this._effect.setVector3("vEyePosition", this._scene.activeCamera.position); this._effect.setVector3("vLightPosition", this.light.position); this._effect.setColor3("waterColor", this.waterColor); this._effect.setFloat4("vLevels", this.waterColorLevel, this.fresnelLevel, this.reflectionLevel, this.refractionLevel); this._effect.setFloat2("waveData", this.waveLength, this.waveHeight); // Textures this._effect.setMatrix("windMatrix", this.bumpTexture.getTextureMatrix().multiply(BABYLON.Matrix.Translation(this.waterDirection.x * this._time, this.waterDirection.y * this._time, 0))); this._effect.setTexture("bumpSampler", this.bumpTexture); this._effect.setTexture("reflectionSampler", this.reflectionTexture); this._effect.setTexture("refractionSampler", this.refractionTexture); }; BABYLON.WaterMaterial.prototype.dispose = function () { if (this.bumpTexture) this.bumpTexture.dispose(); if (this.reflectionTexture) this.reflectionTexture.dispose(); if (this.refractionTexture) this.refractionTexture.dispose();; }; })(); // water shader -- vertex #ifdef GL_ES precision highp float; #endif // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform vec2 waveData; uniform mat4 windMatrix; uniform mat4 world; uniform mat4 worldViewProjection; // Normal varying vec3 vPositionW; varying vec3 vNormalW; varying vec4 vUV; varying vec2 vBumpUV; void main(void) { vec4 outPosition = worldViewProjection * vec4(position, 1.0); gl_Position = outPosition; vPositionW = vec3(world * vec4(position, 1.0)); vNormalW = normalize(vec3(world * vec4(normal, 0.0))); vUV = outPosition; vec2 bumpTexCoord = vec2(windMatrix * vec4(uv, 0.0, 1.0)); vBumpUV = bumpTexCoord / waveData.x; } // water - fragment -- shader #ifdef GL_ES precision highp float; #endif uniform vec3 vEyePosition; uniform vec4 vLevels; uniform vec3 waterColor; uniform vec2 waveData; // Lights varying vec3 vPositionW; varying vec3 vNormalW; uniform vec3 vLightPosition; // Refs varying vec2 vBumpUV; varying vec4 vUV; uniform sampler2D refractionSampler; uniform sampler2D reflectionSampler; uniform sampler2D bumpSampler; void main(void) { vec3 viewDirectionW = normalize(vEyePosition - vPositionW); // Light vec3 lightVectorW = normalize(vLightPosition - vPositionW); // Wave vec3 bumpNormal = 2.0 * texture2D(bumpSampler, vBumpUV).rgb - 1.0; vec2 perturbation = waveData.y * bumpNormal.rg; // diffuse float ndl = max(0., dot(vNormalW, lightVectorW)); // Specular vec3 angleW = normalize(viewDirectionW + lightVectorW); float specComp = dot(normalize(vNormalW), angleW); specComp = pow(abs(specComp), 256.); // Refraction vec2 texCoords; texCoords.x = vUV.x / vUV.w / 2.0 + 0.5; texCoords.y = vUV.y / vUV.w / 2.0 + 0.5; vec3 refractionColor = texture2D(refractionSampler, texCoords + perturbation).rgb; // Reflection vec3 reflectionColor = texture2D(reflectionSampler, texCoords + perturbation).rgb; // Fresnel float fresnelTerm = dot(viewDirectionW, vNormalW); fresnelTerm = clamp((1.0 - fresnelTerm) * vLevels.y, 0., 1.); // Water color vec3 finalColor = (waterColor * ndl) * vLevels.x + (1.0 - vLevels.x) * (reflectionColor * fresnelTerm * vLevels.z + (1.0 - fresnelTerm) * refractionColor * vLevels.w) + specComp; gl_FragColor = vec4(finalColor, 1.); } }
  4. 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 : And i would suggest to run the two versions in fullscreen to see the FPS yourself using the two following links : Using canvas : webgl : Actually the above runs quite smoothly using canvas on Firefox...:-S Any insight would be great.Thanks in advance!
  5. 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 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:
  6. 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,,, 'bgintro'); fondointro.fixedToCamera = true; var turistasintroTotal = 50; for (var i = 0; i < turistasintroTotal; i++) { var s = game.add.sprite(, -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;, 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,, '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?
  7. 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)
  8. 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?
  9. spinnerbox

    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?
  10. 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. 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 <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; }); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script>
  11. 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.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...
  12. 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?
  13. 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?
  14. mauticom

    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,,0); txtScore.font = 'Oswald'; txtScore.fontSize = 30; txtScore.fill = "#FFF"; txtScore.align = "right"; txtScore.fixedToCamera = true;You can even check out the game 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
  15. crowbar

    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
  16. 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?
  17. 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: 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:
  18. ChubbRck

    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
  19. 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
  20. Denaszune


    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: 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
  21. m.recupero

    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: 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: Firefox webview for phonegap: Any idea? Please give me some advice...sorry form my english. Marco.
  22. Monagle

    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. 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?
  23. 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": "", "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's the problem? Shall I remove specific characters from .json file or change encoding? Please help
  24. shaharyar.ahmed

    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 =;}elsedocument.getElementById('status').innerHTML = 'Nothing Selected';});You can check it here
  25. rich

    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."