Search the Community

Showing results for tags 'render'.



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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 63 results

  1. https://www.babylonjs-playground.com/#4HUQQ#207 Hello again, I'm trying to figure out how to check for collisions using intersectsMesh method. The problem is that when I start my scene, the intersectsMesh callback is called since I believe the meshes start at the origin point of the world on the first render before they are moved. The PG above demonstrates the problem. If you open up the browser's developer console, you would see "SHOULDNT HAPPEN" when the mesh intersections occurred. Any tips on how to prevent this problem? Thank you!
  2. Sprite Movement

    Hey Guys, I'm currently moving my camera around a series of sprites but the movement is painful to look at and jerky when moving the sprites and especially with higher speeds, is there anything you can do to fix/help the lag/poor performance as it isn't really usable as a build in this current state. I also as @Wingnut said have the issue that the transparent background is still clickable. Here is my current playground: https://www.babylonjs-playground.com/#41N19L#3 @Deltakosh @Wingnut @JohnK Any incites Guys?
  3. babylonjs sever mode

    My earlier question has dissapeared or been deleted. Let me try again. Can I run babylonjs in server mode similar to UE4 server mode where no rendering and other processing required but only the game and actor states.
  4. I am confused with the two main methods to animate objects in pixi.js. The first one is to build a sprite and put it in a PIXI.Container. I can then add this container as a child of the PIXI stage. Every tick of the animation I just need to update the sprite's position and PIXI will handle the rest for me. I can also build a sprite or a displayObject and create a RenderTexture which is about the same size of what I want to render. Then I use renderer.render(DisplayObject, RenderTexture); to render it on the screen. This works fine too. I still need to update the position on every tick so the displayObject will animate. But what is the difference between using a Container and a RenderTexture? There must be a reason we have two options to render something. What use cases are these two methods best fitted in?
  5. Is this a rendering issue or...

    My issue here is I'm trying to create a countdown timer using fonts and styling of my choice but I don't know how to update the text variable. I want to call the addChild method once and have the value of that string updated in a function. The only way I can see the updated countdown is with the addChild method but at the moment that leaves duplicate copies of the object on the screen. The render does not clear the canvas even though I read in the documentation it's set to do that by default. I tried two methods to get the desired results: var countdown = new PIXI.Text( days+" days "+hours+" hours " +minutes+" minutes "+seconds+" seconds ",timerStyle); countdown.updateText(); timerContainer.addChild(countdown) //tried a second method and that was use to create a sprite from the text textSprite = new PIXI.Sprite(countdown.texture); timerContainer.addChild(textSprite); I did some extensive google searching and I learned that you need to use the function .updateText(); in order for the text variable to actually update. I thought this would work but it does nothing to change the string value on the screen. I have also tried to declare and add the countdown variable to the stage, outside the function but the text does not update. Any suggestions would be greatly appreciated.
  6. Funky Rendered meshes

    Hi guys , I'm fairly new to babylon and this forum. But I already like it a lot. Thanks for the knowledge that is shared over here! I'm trying to build my first little babylon experiment with a friend and we ran into a problem which we don't know how to solve. It's a small scene with a couple of skeletal animations. You can find over here: http://www.somewhere.gl/beta/AnimTest_v06.html When its done it should be looking like this, ...Reference Frame The meshes getting rendered in a funky manner/order We think it has something to do with the alphaIndexes and all our non-opaque meshes. We already searched for it an read this article: about how things are rendered, but we still don't know the best way to fix this: Some advice, best practices would be very welcome. THANKS IN ADVANCE flo PS.: Had some trouble with building a working playground. (It always said that I need to have a camera.) -- A LOT OF CODE WAS POSTED HERE --
  7. Is there a way to call specific function or event when render finishing with rendering specific sprite or event when shader is executed ?
  8. Hi, I know this should not be BabylonJS issue, just intend to aware people that Lenovo Phab 2 Pro may have canvas rendering issue. I am using chome to open the webpage, while firefox and opera had no problem displaying the 3D scene. below are screenshots of webpage with webgl content: The Sponza Demo: www.babylonjs.com/demos/sponza/ The Espilit Demo: https://www.babylonjs.com/demos/espilit/ The Instances Demo: https://www.babylonjs.com/demos/instances/ And all ThreeJS projects I had viewed so far have this issue too: Lasertown: http://oletus.github.io/lasertown/ The Aviator: https://tympanus.net/Tutorials/TheAviator/ It looks like the major area of the canvas is covered, and leaving only a small rectangle area at the left bottom corner to be viewable, I am able to apply user input beyond the viewable rectangle area to navigate the scene(for example the Espilit demo). I had file an bug report to chrome and intend to file another one to lenovo as well.
  9. I'm trying to make game resize appropriately to size of the window/screen. Everything's working out great, except for the tilemap. It seems like the rendering bounds are not updated. (typescript) onResize() { this.game.scale.refresh(); var newWidth = window.innerWidth / 3; var newHeight = window.innerHeight / 3; this.game.scale.setGameSize(newWidth, newHeight); this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //need to call this to apply new size? this.game.camera.setSize(newWidth, newHeight); for (var i = 0; i < this.tilemap.layer.length; i++) { this.tilemap.layer[i].width = newWidth; this.tilemap.layer[i].resizeFrame(this.tilemap, newWidth, newHeight); this.tilemap.layer[i].crop(new Phaser.Rectangle(0, 0, newWidth, newHeight), false); this.tilemap.layer[i].updateCrop(); } this.game.camera.follow(this.player.sprite, Phaser.Camera.FOLLOW_TOPDOWN, 0.8, 0.8); } As you can see I've tried everything, I would've expected resizeFrame or crop to do something, but unfortunately they don't. Do note that the rest of the game updates the size correctly, as the fish get rendered in the widened area just fine. Any ideas how to update the tilemap to the new size? Thanks!
  10. Tiled map being rendered incorrectly

    Hi everybody, Going straight to the point - I've designed a tiled map using Tiled. When I have my game use it, it is rendered incorrectly, with tiles being placed in places I don't want to. I've tried everything I could, with my limited knowledge (I've started using Phaser about a month ago). Needless to say, I've been failing miserably. Any ideas as to what's making this happen? My many thanks! <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 9</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); // We bring Phaser to life by creating a 'Phaser.Game' object and assigning it to a local variable called 'game'. /* In 'Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update })' ... - The first two parameters, '800' and '600', are the width and the height of our game canvas. - The third parameter, 'Phaser.AUTO', automatically chooses the game's rendering method - either WebGL ('Phaser.WEBGL') or Canvas ('Phaser.CANVAS'). - The fourth parameter, '', is the ID of the DOM element where our game's canvas is to be located. If this parameter is left blank, our game's canvas will be located in our HTML's 'body' element. - The fifth and final parameter, '{ preload: preload, create: create, update: update }', is an object that references some of Phaser's essential functions ... 1) 'preload': Loads all assets used by our game (images, sounds, ...); 2) 'create': Creates our game's world using the assets loaded by 'preload' (background, characters, music, ...); 3) 'update': Handles game logic (player movement, object collision, ...); 4) 'render': Calls post-render effects (blur, color correction, ...). That's it! */ function preload() { // Loads all assets used by our game. // Level game.load.tilemap('level', 'assets/mapa_3.json', null, Phaser.Tilemap.TILED_JSON); // Loads our level's architecture. The first parameter, 'level', is how we'll refer to the 'mapa.json' asset and the second parameter, 'assets/mapa.json', is the location of our asset. game.load.image('tiles', 'assets/tiles - plataformas2.png'); // Loads our level's tileset. The first parameter, 'tiles', is how we'll refer to the 'tiles.png' asset and the second parameter, 'assets/tiles.png', is the location of our asset. // Characters game.load.spritesheet('dude', 'assets/dude.png', 32, 48); // The first parameter, 'dude', is how we'll refer to the 'dude.png' asset and the second parameter, 'assets/dude.png', is the location of our asset. Sprite sheets contain animation frames (more at 'http://phaser.io/tutorials/making-your-first-phaser-game/part4'). game.load.image('enemy', 'assets/baddie.png', 128, 32); // The first parameter, 'enemy', is how we'll refer to the 'baddie.png' asset and the second parameter, 'assets/baddie.png', is the location of our asset. Sprite sheets contain animation frames (more at 'http://phaser.io/tutorials/making-your-first-phaser-game/part4'). // Objects game.load.image('star', 'assets/energy.png'); // The first parameter, 'star', is how we'll refer to the 'star.png' asset and the second parameter, 'assets/star.png', is the location of our asset. // Sound game.load.audio('music', 'assets/music.ogg'); // The first parameter, 'music', is how we'll refer to the 'music.ogg' asset and the second parameter, 'assets/music.ogg', is the location of our asset. } var player; // Declares the global variable 'player' for later use. var enemy; // Declares the global variable 'enemy' for later use. var cursors; // Declares the global variable 'cursors' for later use. var stars; // Declares the global variable 'stars' for later use. var score = 0; // Declares the global variable 'score' for later use. var scoreText; // Declares the global variable 'scoreText' for later use. var music; // Declares the global variable 'music' for later use. var map; // Declares the global variable 'map' for later use. var bg_layer; // Declares the global variable 'bg_layer' for later use. var fg_layer; // Declares the global variable 'fg_layer' for later use. var edges_layer; // Declares the global variable 'edges_layer' for later use. function create() { // Creates our game's world using the assets loaded by 'preload'. // General game.physics.startSystem(Phaser.Physics.ARCADE); // Enables our physics system. map = game.add.tilemap('level'); // Gives shape to our game level. map.addTilesetImage('tiles'); // Fills our level's shape using the tiles in the 'tiles' tileset. bg_layer = map.createLayer('Background'); // Creates a background using the 'Background' layer in 'mapa.json'. fg_layer = map.createLayer('Foreground'); // Creates a foreground using the 'Foreground' layer in 'mapa.json'. edges_layer = map.createLayer('Edges'); // Creates invisible walls around platform edges using the 'Edges' layer in 'mapa.json'. front_layer = map.createLayer('Front'); // Adds some extras to the background using the 'Front' layer in 'mapa.json'. map.setCollisionBetween(1, 10000, true, fg_layer); // Allows our characters to collide with the foreground layer. map.setCollisionBetween(1, 10000, true, edges_layer); // Allows our characters to collide with the invisible walls around platform edges. bg_layer.resizeWorld(); // Matches layer dimensions with game world dimensions ('800' by '600' pixels). // Player player = game.add.sprite(128, 64, 'dude'); // Adds a character to our game. The first two parameters, '128' and '64', are the X and Y coordinates we want to position our asset at and the third parameter, 'dude', is the asset itself. game.physics.arcade.enable(player); // Enables physics for our character. player.body.bounce.y = 0.2; // Gives our character some bounce. player.body.gravity.y = 400; // Applies gravity to our character. player.body.collideWorldBounds = true; // Allows our character to collide with the game world bounds. player.animations.add('left', [0, 1, 2, 3], 10, true); // Gives our character some animation whenever he moves to the left. The first parameter, 'left', is the movement that triggers the frames '[0, 1, 2, 3]' in the second parameter. The third parameter, '10', tells the animation to run at 10 frames per second while 'true', the fourth and final parameter, tells the animation to loop. player.animations.add('right', [5, 6, 7, 8], 10, true); // Gives our character some animation whenever he moves to the right. The first parameter, 'right', is the movement that triggers the frames '[5, 6, 7, 8]' in the second parameter. The third parameter, '10', tells the animation to run at 10 frames per second while 'true', the fourth and final parameter, tells the animation to loop. game.camera.follow(player); // Follows our character around the game world. // Enemy enemy = game.add.sprite(250, 150, 'enemy'); // Adds an enemy to our game. The first two parameters, '32' and 'game.world.height - 150', are the X and Y coordinates we want to position our asset at and the third parameter, 'dude', is the asset itself. game.physics.arcade.enable(enemy); // Enables physics for our character. enemy.body.bounce.setTo(1, 1); // Allows our enemy to bounce off walls (visible or not) and off the ground. enemy.body.gravity.y = 400; // Applies gravity to our enemy. enemy.body.collideWorldBounds = true; // Allows our enemy to collide with the game world bounds. enemy.body.velocity.x = 50; // Allows our enemy to move. // Collectibles stars = game.add.group(); // Creates a 'stars' group that will allow us to manipulate all star collectibles in our game simultaneously. stars.enableBody = true; // Enables physics for any star collectible in the 'stars' group. for (var i = 0; i < 12; i++) // Creates 12 star collectibles, all of them evenly spaced apart. { var star = stars.create(i * 70, 0, 'star'); // Creates a star collectible. The first two parameters, 'i * 70' and '0', are the X and Y coordinates we want to position our asset at and the third parameter, 'star', is the asset itself. star.body.gravity.y = 300; // Applies gravity to our star collectible. star.body.bounce.y = 0.7 + Math.random() * 0.2; // Gives our star collectible some bounce. } // Score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#fff' }); // Creates a score text. The first two parameters, '16' and '16', are the X and Y coordinates we want to position our default text, 'score: 0', at and the fourth and final parameter, '{ fontSize: '32px', fill: '#000' }', is the size and color of the text itself. // Player input cursors = game.input.keyboard.createCursorKeys(); // Enables our game controls. // Sound music = game.add.audio('music'); // Adds a music to our game. music.loop = true; // Loops our game's music. music.play(); // Plays the music. } function update() { // Handles game logic (player movement, object collision, ...). // Collision detection game.physics.arcade.collide(player, fg_layer); // Allows our character to collide with platforms. game.physics.arcade.collide(enemy, fg_layer); // Allows our enemies to collide with platforms. game.physics.arcade.collide(enemy, edges_layer); // Allows our enemies to collide with the invisible walls around platform edges. game.physics.arcade.collide(stars, fg_layer); // Allows our character to collide with star collectibles. // Touch detection game.physics.arcade.overlap(player, stars, collectStar, null, this); // Checks if our character overlaps with any of the star collectibles and, if he does, calls the 'collectStar' function. game.physics.arcade.overlap(player, enemy, gameOver, null, this); // Checks if our character overlaps with any of our enemies and, if he does, calls the 'gameOver' function. // Player movement player.body.velocity.x = 0; // Resets our character's horizontal movement. if (cursors.left.isDown) // If the 'left' key on our keyboard is pressed ... { player.body.velocity.x = -150; // ... we move our character to the left ... player.animations.play('left'); // ... and play the 'left' animation. } else if (cursors.right.isDown) // If the 'right' key on our keyboard is pressed ... { player.body.velocity.x = 150; // ... we move our character to the right ... player.animations.play('right'); // ... and play the 'right' animation. } else // If no key on our keyboard is pressed ... { player.animations.stop(); // ... we play no animation whatsoever ... player.frame = 4; // ... we display our character on its frame 4 position. } if (cursors.up.isDown && (player.body.blocked.down || player.body.touching.down)) // If the 'up' key on our keyboard is pressed and our character is touching a surface ... { player.body.velocity.y = -350; // ... we allow our character to jump. } } function collectStar (player, star) { // This function is called if our character overlaps with any of the star collectibles. star.kill(); // If our character overlaps with any of the star collectibles, that star collectible is removed from the screen ... score += 10; // ... the score is incremented ... scoreText.text = 'Score: ' + score; // ... and the score is updated. } function gameOver (player, enemy) { // This function is called if our character overlaps with any of the enemies. player.kill(); // If our character overlaps with any of the enemies, our player dies. } </script> </body> </html>
  11. How to dispose a material on run time and dynamically create again. I want when my sphere material collide with floor material my sphere material should dispose completely and I want to create a new sphere material again. @Deltakosh @Wingnut @Dad72
  12. debug doesn't seem to work?

    I've recently been coding an infinite runner game in which the player is allowed to attack freely as they encounter obstacles and enemies. this being said, there is various objects that use collisions and physics bodies for collision detection and i have tried everything i have found to render the debug boxes to no avail. Attack = function() { Phaser.Sprite.call(this, game, player.x + 15, player.y, 'Attack'); game.add.existing(this); game.physics.enable(this, Phaser.Physics.ARCADE); this.animations.add('attack'); this.animations.play('attack', 8, false, true); this.body.setSize(50, 80, 30, 0); this.body.allowGravity = false; this.body.immovable = true; game.time.events.add(Phaser.Timer.SECOND * attackSpeed, setAttack, this); curAtk = this; }; //these set the variable 'Objects' Attack.prototype = Object.create(Phaser.Sprite.prototype); Attack.prototype.constructor = Enemy; //this checks conditions specific for the Attack Object made through the class every update. Attack.prototype.update = function() { this.x = player.x + 15; this.y = player.y; this.game.debug.bodyInfo(this); }; here is specifically the attacking object spawn which spawns the attack object, and on the last line of actual code i try to call the debug information to render. I'm not sure that this is the way to do it, but i have added the "render: render" to my game initialization and tried to call the code in that as well plus using the references within the examples as well and i cannot for the life of me figure out why the body's are not debugging allowing me to fine tune the desired collision areas. Any thoughts or ideas are welcome. if more code is needed of what i have i can upload my JS files. Also a quick note, there are no error messages. and everything runs as expected aside from the debugging aspect and proper hit-box areas.
  13. render problem on ipad4

    Hi guys, I tested my game on ipad4, and sometimes a few sprites can not be displayed(most of the time is the bg image), but the rest are rendered normally, since it does not happen every time, and it only happen on ipad4, moreover, it does not pop out any error, it's really hard to find the cause, does anyone know what could be the possible cause to this sort of partially render problem?
  14. I have a function (fire_event()) outside update(). Inside this function, I do these things: function fire_event(){ my_flag = false; do_stuff_1(); game.add.tween(sprite).to( { alpha: 1.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){ game.time.events.add(Phaser.Timer.HALF, function(){ do_stuff_2(); game.add.tween(sprite).to( { alpha: 0.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){ my_flag = true; }, this); }, this); }, this); } function update(){ if(my_flag){ do_update_stuff(); } else { //do nothing } } Everything that need to be rendered on function do_stuff_2(), is not rendering... only when the most inner tween finishes things got rendered. Everything go rendered, till the code reaches do_stuff_2(). ------------------------------ Detailed info about do_stuff_2(): underlayer_group.removeAll(); //clear group overlayer_group.removeAll(); //clear group map_name = current_event.target; //thats just a string maps[map_name].setLayers(underlayer_group, overlayer_group); //I'll provide a more details on it, but it basically add new layers to these groups hero.body.x = current_event.x_target * maps[map_name].sprite.tileWidth; //hero is a sprite. Changing it x position hero.body.y = current_event.y_target * maps[map_name].sprite.tileHeight; //hero is a sprite. Changing it y position shadow.x = hero.x; //shadow is a sprite. Changing it x position shadow.y = hero.y; //shadow is a sprite. Changing it y position //reconfig world physics game.physics.p2.resume(); map_collider.body.clearShapes(); map_collider.body.loadPolygon(maps[map_name].key_name, maps[map_name].key_name); mapCollisionGroup = game.physics.p2.createCollisionGroup(); map_collider.body.setCollisionGroup(mapCollisionGroup); map_collider.body.setZeroDamping(); map_collider.body.setZeroRotation(); hero.body.collides(mapCollisionGroup); map_collider.body.collides(heroCollisionGroup); game.physics.p2.updateBoundsCollisionGroup(); Detailed info about setLayers(): setLayers(underlayer_group, overlayer_group){ this.map_sprite = game.add.tilemap(this.key_name); //set map sprite this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); //set tilemap image for(var i = 0; i < layers.length; i++){ var layer = this.map_sprite.createLayer(layers[i].name); //create a layer layer.resizeWorld(); if(layers[i].properties.over != 0) //just test a property to determine which group this layer is going to make part overlayer_group.add(layer); else underlayer_group.add(layer); } } --------------------------------- In short words: do_stuff_2() removes sprites from groups, then add new layers to them, and change some sprites position. The thing is, everything inside do_stuff_2() only happens when the tween under do_stuff_2() finishes. The inner tween makes alpha channel goes from 1 to 0 immediately. Here is a working example: https://jjppof.github.io/goldensun_html5/index The problem happens always in the fade out. Fade in works. To see the problem, just get inside the "inn" house. This part of the code is inside the index.js file at root folder. Line 227, inside teleport() function. QUESTION: Does a time event inside a tween, like the example above, make things do not render excepting when everything is finished? Don`t things get rendered when I nest callbacks?
  15. I'm building an angular web app with an embedded pixi component. I'm trying to render a cat image to my pixi stage but for some reason it will simply not render. Here is the code that I use to create the stage and try to render the cat: generatePixiCanvas() { this.renderer = PIXI.autoDetectRenderer(this.getParentDivWidth(), this.getParentDivHeight()); document.getElementById('pixi-canvas-container').appendChild(this.renderer.view); this.stage = new PIXI.Container(); this.generatePixiTextObject(); var sprite = PIXI.Sprite.fromImage("/assets/cat.png"); sprite.position.set(100, 100); sprite.interactive = true; sprite.width = 100; console.log("test:" + sprite.visible + sprite.width); this.stage.addChild(sprite); this.render(); } When the page loads, I get the string "test:true100" logged to the console, which must mean that the sprite is successfully created and it's width is large enough to be see, but for some reason, it simply does not appear! I have absolutely no idea why this could be happening, because text objects are rendered fine. I've attached an image of my folder structure, the above code is located in the pixi-component folder. Please help
  16. I would like a timer to display in the top right of the game window. the time to be counting up in seconds . milliseconds to the 3rd decimal ( 00.000 ). i've found lots of examples to show an event on timer but not to just keep track of the game time and display. I'm assuming I need something in the update function to keep the time updating but not sure what. vaultage.game = function() {}; vaultage.game.prototype = { create : function() { // timer this.timer = game.time.create(); this.game.add.text(20, 700, this.timer,{ font: "10px Raleway"} ); this.timer.start(); }, update : function() { }, shutdown : function() { }, }
  17. This is my first post here and to begin with, I'd like to give big congratulations to Babylon.js team ! Your framework is really impressive and the best yet for my use case (pedagogical web game about simple astronomy facts) Now, my problem: http://babylonjs-playground.com/#1QJOWT#1 I can't find a way for positioning the camera correctly according to the computed scene graph before the render... so the sphere at the center is jittering, and it gets worse if we increase the speed parameter. The complete system looks like this: http://babylonjs-playground.com/#1QJOWT#3 I want the camera to stay at earth position and to center on the moon. I've tried fiddling with scene.beforeCameraRender with no success... I guess I don't understand something about the internal priorities used before rendering each frame. c.f. the not working: http://babylonjs-playground.com/#1QJOWT#2 I've searched the forum but couldn't find any solution. Maybe it's related to: or ? http://www.html5gamedevs.com/topic/5509-how-do-you-guys-write-your-timestep-stuff-any-advice/ Thanks a lot for any help if anyone has a clue ! Thanks anyway to the babylon engine community !
  18. Philosophical question

    Hi everyone, A bit of a babylon philosophical question here. I want to deal with a massive amount of spheres, and want to keep it as smooth as possible. I thought I would hide spheres which are no longer in the view frustum. Now that I got that code, I wonder what is the most efficient, either to hide the meshes by selecting and applying .visibility = 0, or if it is better to dispose of the meshes ? If you're curious, in my case I only rotate the camera and don't move it, and I know what I have to show thanks to the angles within a database. Currently, Babylon still feels a bit too slow to my taste with many elements hidden. Should I change my code to dispose of the meshes and recreate them instead of hiding/showing ? Best, Kevin
  19. So i've encountered a problem when it comes to rendering low res sprites and upscaling in phaser. I'm pretty sure this issue has been tackled many times, but i haven't found any good solutions to it. The problem is that some pixels are getting wider than others. Like this: My game is at 480x320 and im scaling the game with SHOW_ALL. I've tried settin roundPixels to true and various CSS tricks. But nothing seem to change. Anybody know a swift solution to this? Thanks!
  20. Hey. Was planning to do something big with babylon, but realized that chrome has got some problem with using all the computer's specifications, and may lag twice as much than a normal appliaction, so I wanted to kow how to (if you can) modify the render distance. thanks.
  21. I am making a game with skins in it. When ever player changes a skin Images gets loaded again. I use this code. preload: function () { this.load.image('arm', 'asset/Theme'+this.theme+'/arm.png'); this.load.image('leg', 'asset/Theme'+this.theme+'/leg.png'); this.load.image('head', 'asset/Theme'+this.theme+'/head.png'); this.load.image('torso', 'asset/Theme'+this.theme+'/torso.png'); } gameFunction:function() { if(this.themeChanged) { this.theme = this.newTheme; game.lockRender = true; game.load.onLoadComplete.add(this.preloadComplete, this); this.preload(); game.load.start(); } } preloadComplete:function() { game.load.onLoadComplete.remove(this.preloadComplete, this); game.lockRender = false; this.addImages(); }, This gives me an error What am I doing wrong here?
  22. cocoon blank white screen

    Hi Quick question - I am in the process of creating my first game / app (http://www.html5gamer.mobi/PIXI/TEMPLATE1/index.html) with PIXI and when I run it in windows and browers everything is fine, when I use phonegap and build it I can run it on my samsung note3 (Android version 5), but not my galaxy tabs (tab10.1 ( Android version 4.0.4) and tab 3 (Android version 4.4.2 ), I just get a white screen. (I havent tried an Apple device as I dont have a developer account to test it) When I use cocoon I get a white screen on all 3 devices, I have tried : PIXI.autoDetectRenderer PIXI.webGLRenderer PIXI.CanvasRenderer but no joy - has anyone else experienced this problem thanks in advance Eric
  23. Animate depth of field

    I have been trying to figure out a way to animate the focus distance of the depth of field post process but have come up empty handed. I have setup a click event that runs a set of animations changing the (arc) camera's alpha, beta, radius, position, and target. I would like to animate the dof_focus_distance to match that of the camera radius so that the selected object keeps focus. my click event: scene.onPointerDown = function(e, pickResult) { if (pickResult.hit ) { ArcAnimation(0, camera.upperBetaLimit, camera.lowerRadiusLimit, pickResult.pickedMesh.position, pickResult.pickedMesh, true); currentobj = pickResult.pickedMesh; } }; I set up the depth of field with the following: (this came for the docs at http://doc.babylonjs.com/tutorials/Using_depth-of-field_and_other_lens_effects) var params = { edge_blur: 1, chromatic_aberration: 0, distortion: 0, dof_focus_distance: 4000, dof_aperture: 200, grain_amount: 0 }; var lensEffect = new BABYLON.LensRenderingPipeline('lensEffects', params, scene, 1.0, camera); My animation function: var ArcAnimation = function (toAlpha, toBeta, toRadius, toPosition, obj, arc) { var keysAlpha = [], keysBeta = [], keysRadius = [], keysPosition = []; var easingFunction = new BABYLON.CubicEase(); easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); var animCamAlpha = new BABYLON.Animation("animCam", "alpha", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysAlpha.push({frame: 0, value: camera.alpha}); keysAlpha.push({frame: 300, value: toAlpha}); var animCamBeta = new BABYLON.Animation("animCam", "beta", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysBeta.push({frame: 0, value: camera.beta}); if (arc) { keysBeta.push({frame: 150, value: toBeta*0.2}); } keysBeta.push({frame: 300, value: toBeta}); var animCamRadius = new BABYLON.Animation("animCam", "radius", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysRadius.push({frame: 0, value: camera.radius }); keysRadius.push({frame: 300, value: toRadius }); var animCamPosition = new BABYLON.Animation("animCam", "target", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3 , BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysPosition.push({frame: 0, value: camera.target }); if (arc) { keysPosition.push({frame: 150, value: obj.position.add( new BABYLON.Vector3(0,obj.position.y + obj.position.y*0.5 ,0) )}); } keysPosition.push({frame: 300, value: obj.position }); animCamAlpha.setKeys(keysAlpha); animCamBeta.setKeys(keysBeta); animCamRadius.setKeys(keysRadius); animCamPosition.setKeys(keysPosition); animCamAlpha.setEasingFunction(easingFunction); animCamBeta.setEasingFunction(easingFunction); animCamRadius.setEasingFunction(easingFunction); animCamPosition.setEasingFunction(easingFunction); camera.animations.push(animCamAlpha); camera.animations.push(animCamBeta); camera.animations.push(animCamRadius); camera.animations.push(animCamPosition); scene.beginAnimation(camera, 0, 300, false, 2, function () { }); }; I attempted to animate the DOF the same but it seems that cannot be done, or I am doing it wrong. I tried like this, among other ways but this was my last attempt before wanting to rage flip my desk: var keysDofFocusDistance = [], keysDofApeture = []; var animDof = new BABYLON.Animation("animDof", 'setFocusDepth', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); keysDofFocusDistance.push({frame: 0, value: 4000}); keysDofFocusDistance.push({frame: 100, value: toRadius}); animDof.setKeys(keysDofFocusDistance); animDof.setEasingFunction(easingFunction); lensEffect.animations.push(animDof); scene.beginAnimation(lensEffect.setFocusDepth, 0, 100, false, 2, function () { console.log("animated DOF"); }); SO, is it possible to animate the depth of field focus (or any properties) at all? Why not allow it to use an object as a focal point? I'm new to babylon so maybe I am just missing something simple. I can modify the value using lensEffect.setFocusDistance(toRadius); but I would really like to get it animated some how. thanks, Charles EDIT: here is a playground http://www.babylonjs-playground.com/#1ENHC8#1
  24. Hi guys! I'm new with Babylon and I'd really appreciate some advise. I am trying to create a tiled ground with LOD meshes. For some reason the tiles on the edges of the viewport get filtered out and not rendered, despite being close enough. Any idea whats causing it and how to prevent it?
  25. Hello everyone, in my application, I normally only need to render the 3D view after the user has changed some settings of the confugration or the view is being used (with either the mouse , finger or keyboard) the rest of the time no rendering is needed. But how can I know if Babylon is doing something that needs? For example: Can I look somewhere if the camera has stopped moving? (Especially when it's deaccelerating) Or an animation is running? Thanks for your answer! Kevin