Search the Community

Showing results for tags 'loading'.



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 47 results

  1. long loading time

    Hello again. I continue develop a site with babylonjs, but I have a few problems. I have a scene created with blender, I generate the babylon file, the scene has some textures, I converted the textures to a ktx format, with the script in the babylon page. You can see the page in: http://entornomexicano.com/ I import the scene with: if (!BABYLON.Engine.isSupported()){ console.log("Motor no soportado"); return; } canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); // Asignamos los tipos de textura compimidos que se pueden usar var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc1.ktx', '-etc2.ktx']; var formatUsed = engine.setTextureFormatToUse(available); BABYLON.SceneLoader.Load(blendPath + "scene1/", "landScape.babylon", engine, function (newScene) { // asignamos la escena scene = newScene; // Creamos el entorno y las luces createSkybox("models/scene1/sky2.jpg"); createWaterMesh("waterMesh", imgPath + "waterbump.png", new BABYLON.Vector3(0, -0.08, 0), 6, getMeshListToRender()); createCamera(1, new BABYLON.Vector3(-0.23, 0.56,-2.73), new BABYLON.Vector3(0, 0, 0)); // arch camera createParticleSystem(); createLights(); createShadows(); createVolumetricLightEffect(); createActionsContollers(); // Wait for textures and shaders to be ready scene.executeWhenReady(function () { // Quitamos la imagen del cargador cuando termine el proceso de carga $("#loaderPadre").remove(); scene.createOrUpdateSelectionOctree(); // quitamos los calculos de los objetos para hacer mas eficiente la escena scene.meshes.forEach(function (mesh) { if(mesh.name.search("NO_") === -1) mesh.freezeWorldMatrix(); }); // Funcion para cuando se redimensiona la ventana $(window).on('resize', function() { engine.resize(); }); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { // console.log(engine.getFps()); scene.render(); }); }); }, function (progress) { if(progress.total == 0) return; $(".textoCarga").text( ((progress.loaded/progress.total)*100).toFixed(2) + "%"); }); In the callback function I return the loadign progress, but in some devices the progres is too slow, and When I already have 100% the scene still takes time to show, maybe i have doing some wrong. Somebody know, What I can do for resolve that? And other problem is the performance of the scene, I rremoved some elements and I have down the quality of the shadows, but the fps is 30, How I can increase the speed? the complete code is in: https://github.com/flelix/entorno-models.git in the folder: entorno-models/code/proyBabylon/entorno/ here you can see the project. I hope you can help me. Thanks and regards.
  2. Loading times feedback

    Hi It's been a while since I last wrote here. I friend of mine told me that he couldn't load my HTML5 game and that the page got stalled on chrome for windows . However every test I have done so far using different browsers and operating systems worked for me including Android and some iOS versions. I'm puzzled by this. Usually, the first time it will take around 30 seconds to load the app and another 15 seconds to be able to play but now I'm not sure. So It will be awesome if you can give me any type of feedback regarding this issue (please provide browser version and OS version). Any help will be very much appreciated. You can try dom-dom ( a domino game) here: http://dom-dom.mx The above link will redirect your browser to https://dom-dom.mx where the actual game resides. Once fully loaded you shall see something like the attached image. Thanks in advance. Cheers.
  3. Hello I want to load a scene generated from blender, the generated file is .babylon, in my local, I have no a problem loadding the sene but in the host I can´t, in the console I have the next problem: Uncaught Error: Error status: 404 - Unable to load models/scene1/landScape.babylon at XMLHttpRequest.e.onreadystatechange (babylon.custom.js:3) Searching in google I se that I need to add mime types but I don´t know how. my html code is: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Entorno Mexicano</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <canvas id="renderCanvas"></canvas> <!-- Carga de los js que se utilizan --> <!-- Babylon.js --> <script src="js/babylon.custom.js"></script> <script src="js/jquery-3.1.0.min.js"></script> <!-- codigo js personalizado --> <script src="js/main.js"></script> </body> </html> and my js file is: if (BABYLON.Engine.isSupported()) { canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load("models/scene1/", "landScape.babylon", engine, function (newScene) { scene = newScene; // Wait for textures and shaders to be ready scene.executeWhenReady(function () { // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { scene.render(); }); // Funcion para cuando se redimensiona la ventana $(window).on('resize', function() { engine.resize(); }); }); }, function (progress) { $(".textoCarga").text( ((progress.loaded/progress.total)*100).toFixed(2) + "%"); }); } Any idea why I can do Thanks an regards
  4. I'm stuck with loading my meshes. I'm new to all the 3D and modelling so any thoughts are highly appreciated. Basically I want to extends Babylons default Mesh class called BaseMesh and add a 'load' function to it to get rid of clutter in my scene code. I'm extending this BaseMesh class for each model I have. My BaseMesh class: (Note that all code examples are written in TypeScript) // BaseMesh.ts class BaseMesh /* extends BABLYON.Mesh */ { public readonly BASE_URL: string; // I want these to be static public readonly MODEL_URL: string; // I want these to be static public readonly NAME: string; // I want these to be static public body; /* constructor( scene ) { // I don't know what to do here super( this.NAME //name scene // scene null // parent ? // source ); } */ public load( assetsManager: BABYLON.AssetsManager ) { return assetsManager.addMeshTask( this.NAME + ' task', // name "", this.BASE_URL, this.MODEL_URL ); } public onLoaded( results ) { // I don't know what to do here this.body = results.loadedMeshes[0]; } public update(): void {} }; A model class would looks like this: // Robot.ts class Robot extends BaseMesh { public readonly BASE_URL: string = '/models/'; public readonly MODEL_URL: string = 'robot.babylon'; public readonly NAME: string = 'robotMesh'; public update(): void { this.body.rotation.y += 0.03; } } In my code above I store the loadedMesh from the AssetsManager into this.body. But here is question 1: why is my model already showing on the scene when the meshtask has run? I'm only loading a mesh, I've not put anything about putting it on the scene. Question 2: How do I extend my BaseMesh class from BABLYON.Mesh so that the result (loadedMeshes) of my load function is "the mesh itself" (instead of an attribute this.body). For example this would mean I could change my update function to 'this.rotation.y += 0.03;' and just generally makes more sense. Question 3: I'm really confused about the relationship between my "code" and my "model/.babylon files". Is there any good documentation/tutorials about this? These questions range from: - when is it healthy to split different parts of a model in different files - do I apply textures in my code or do I do that in my .babylon file - do I apply animations in my blender file or do I code them - ... This was a pain to type, if you have any questions please do ask Thank you in advance!
  5. 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?
  6. Hi Guys, I'm currently making a game and I've run into a bit of an issue with one of the states that is loading multiple animations. There are 5 animations in total that play as soon as the state loads. They also loop. The problem that I'm having is that the state with the animations is taking around 5+ seconds to load, even though the spritesheets have been loaded in the Preload State. I feel this might be because the animations are being set so 60 FPS. I would prefer it if I could add this extra loading time to the Preload State if possible (because it has a loading bar) so I was wondering if there is a way to create the animations in a previous state and then have them play instantly on the page I need them to. Any help would be appreciated.
  7. Hi all. I'm trying to return an array of objects loaded by the Mesh Importer for later use. I would like to be able to call a function to load my objects and outside of the function, affect & change each one of them OUTSIDE of the function. Here is the small demo I made :: http://www.babylonjs-playground.com/#1QJUDF#3 Thank you! <3 Mythros
  8. I have issue with loading images from atlas! Game I developing works great , but on older devices after loading , images are not shown! This happens on Samsung Galaxy Tab 2 in every browser (chrome , opera ,firefox). So if somebody have solution , please help
  9. Okay, so a lot of the tutorials for Pixi.js seem a bit outdated. Most of the information out there still uses the old way of creating a new Pixi application by not using the newer 'convenient' Application class and setting up the renderer, container, and ticker by hand. A lot of the guides and articles also seem to be written before Pixi adopted and extended on a third-party loader module. Anyway, could someone explain to me how loading assets works, and what it means exactly? Normally, to start displaying some visuals with Pixi, you need to create a texture, and then a sprite from that texture, yes? Example: var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; var sprite = new PIXI.Sprite(texture); But then comes the 'loader' to the rescue. From my understanding, the Pixi loader is an object that simplifies handling assets because it creates the textures for you? For example: const loader = PIXI.loader .add('image1', '/assets/images/image1.png') Am I correct? I can't wrap my head around this. Here's my code altogether (it doesn't work by the way): const app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); const sprites = []; const loader = PIXI.loader .add('image1', 'assets/images/image1.png') .load(function(loader, resources) { sprites.image1 = new PIXI.Sprite(resources.image1.texture); init(); }); function init() { app.stage.addChild(sprites); } Do I need to render the stage in the 'init' function as well? Do I have to call 'load()' at some point? I'm so confused! However, this code works and I'm not sure why: const app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); document.body.appendChild(app.view); const loader = PIXI.loader; loader.add('image1', '/assets/images/image1.png'); loader.once('complete', function(loader, resources) { init(); }) loader.load(); function init() { let sprite1 = new PIXI.Sprite(PIXI.loader.resources.image1.texture); app.stage.addChild(sprite1); } EDIT Okay, it's making a lot more sense to me now. Here is the cleanest way I've come up with when using loader: const app = new PIXI.Application(800, 600); document.body.appendChild(app.view); const loader = PIXI.loader; loader .add('image1', '/assets/images/image1.png'); loader.on('complete', function(loader, resources) { let sprite1 = new PIXI.Sprite(loader.resources.image1.texture); app.stage.addChild(image1); }); loader.load();
  10. What benefits importing assets in .babylon format has over .obj format? Which is better for performance, especially for loading very big high poly objects (for example, 100mb)?
  11. Hi! I've been using Babylon for a week or so now and really like how easy it is to use and how well the tutorials are written (I'm using it for a robotics simulation project I'm currently working on). Anyways, I have a question about how textures (and other AssetTasks as well: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.assetsManager.ts) are loaded using the AssetManager. I have a texture image that's being served at /app/assets/sceneassets/mytextureimg.jpg. My Babylon scene is loaded at the url /app/testbabylon. When I try to load a texture using the addTextureTask method of the AssetManager, I specify that the asset is located at "/app/assets/sceneassets/mytextureimg.jpg", however, the network request that the AssetManager makes is to "/app/testbabylon/app/assets/sceneassets/mytextureimg.jpg". This is clearly relative to my current path, I can use an absolute path (in dev: "http://localhost:4000/app/assets/sceneassets/mytextureimg.jpg") and it works correctly, however this seems messy (especially if switching domains). If I end up using "//app/assets/sceneassets/mytextureimg.jpg" the network request is "http://app/assets/sceneassets/mytextureimg.jpg" - which doesn't point to anything. My main question is whether its possible to specify the AssetManager to use the root url of my domain for texture (and/or image, cubetexture, etc.) loading (or have something like a "rootUrl" parameter like AddMeshTask seems to have). Just for reference, here's a snippet of the code I'm using (material is an object that has a name and diffuseTexture property; where diffuseTexture is the url string, scene is a Babylon Scene object). setupMaterial(material, scene) { const babylonMaterial = new Babylon.StandardMaterial(material.name, scene); if (material.diffuseTexture) { const diffuseTask = scene.loader.addTextureTask( `diffuseTextureTask${material.name}`, material.diffuseTexture); diffuseTask.onSuccess = (task) => { babylonMaterial.diffuseTexture = task.texture; }; } return babylonMaterial; } Thanks for any help, Flux159
  12. Loading / Performance - collision

    Hi! I am working on my first Phaser-game. I have a performance issue with my collision rendering. I am using tilemaps and an extra layer for my collision. You can see my example on http://wpdev.at/moemax-store-game-collision/ (without rendering collision) and here is the example with rendering collision: http://wpdev.at/moemax-store-game/ Everything is fine on Desktop. Loading time is about 6 seconds. But on mobile devices it takes about 1minute to load. I am using "map.setCollisionByExclusion([], true, this.collisionLayer);" for my collisions. Already tried toreduce the number of layers to a minimum - about 2 layers - does not help. Tried using map.setCollision([8,9..]) - did not render any collision for me. Any suggestions? Thanks for your replies.
  13. simple loading method for make cylinder or sphere around of target object http://www.babylonjs-playground.com/#1JUXK5#0
  14. Issue with loading assets

    Hello All, I am completely new to Phaser. For learning purposes, I did a little game from a recent book that I bought, and put it on my website, that I use for testing my stuff. Here is the URL: http://www.retroinvaders.net/shump/build/index.html The issue is that the game assets won't load properly at first time, it's only when I refresh the page, at least 4 times, that I see all the assets of the game properly loaded. The Web Console (Firefox) says: Phaser.Cache.getImage: Key "enemyBullet" not found in Cache. Same error for all the game assets is repeated again and again, so not just "enemyBullet", but all the assets. Here is the code of the Preload.js file. export default class Preload { constructor() { this.asset = null; this.ready = false; } preload() { this.load.image('loading_bg', '../assets/images/loading_bg.jpg'); } create() { //background for game this.add.sprite(0,0, "loading_bg"); this.asset = this.add.sprite(this.game.width/2,this.game.height/2, 'preloader'); this.asset.anchor.setTo(0.5, 0.5); this.load.onLoadComplete.addOnce(this.onLoadComplete, this); this.load.setPreloadSprite(this.asset); //do all your loading here //this.load.image('player', '../assets/images/player.png'); //width and height of sprite this.load.image('bg', '../assets/images/bg.jpg'); this.load.image('bullet', '../assets/images/bullet.png'); this.load.image('enemy', '../assets/images/enemy.png'); this.load.image('explosion', '../assets/images/explosion.png'); this.load.spritesheet('player', '../assets/images/gunbot.png', 214, 269); //width and height of sprite this.load.image('hexagon', '../assets/images/hexagon_particle.png'); //this.load.image('bullet', '../assets/images/bullet.png'); this.load.image('enemyBullet', '../assets/images/enemyBullet.png'); //this.load.image('bg', '../assets/images/bg.jpg'); this.load.image('health_bar', '../assets/images/health_bar.png'); this.load.image('health_holder', '../assets/images/health_holder.png'); this.load.image('circle', '../assets/images/circle.png'); //staaaart load this.load.start(); } update() { if(this.ready) { this.game.state.start('game'); } } onLoadComplete() { this.ready = true; } } What am I doing wrong? Aany help, would be greatly appreciated. Thank you.
  15. Hello, I have a problem with get information how many percent of all mesh/textures were loaded, while I use AssetsManager. I have seen a similar topic, but there SceneLoader is used. Is it possible to get those information about loading progress, while I use AssetsManager?
  16. Hi all, I want to ask that is there any way to operate the loading file. what I want to do is when the file loading or waiting for the response more than 5 sec, I will stop this loading process and start a new loading from another url. I tried to customize the addToFileList function in the loader to replace the file in the Loader._fileList. but it seems the xhr loading request is still on-going. So, I wonder that can I just mark this loading as error to trigger the onError event in the loader, and stop the xhr request for this file. thx
  17. Phaser.Loader error on asset load

    For a start I would like say hello and give my appreciation to the whole of html5gamedev's amazing and helpful community. I've been lurking here for a while and while you might not have known it, this community has already saved my tons of hours =] . Now to my problem. I litterly JUST started with Phaser and while following ( what I could only imagine to be ) the introductory tutorial , I ran into my very first problem: Right now I am simple trying to load a basic bg image as follows: var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: preload, create:create, update:update}); function preload(){ game.load.images('bg', 'assets/levels/Stage_One_Base.png'); } function create(){} function update(){ } other then that my whole index consist of only including the Phaser framework and this script file. the error I am getting is as follows : Phaser v2.6.2 | Pixi.js | WebGL | WebAudio http://phaser.io ♥♥♥ GET http://localhost/workspace/phaserGame/b.png 404 (Not Found) GET http://localhost/workspace/phaserGame/g.png 404 (Not Found) phaser.js:74259 Phaser.Loader - image[b]: error loading asset from URL b.png phaser.js:74259 Phaser.Loader - image[g]: error loading asset from URL g.png This does not make any sense to me. Firstly why is it giving me error about 2 assets, while I am only loading 1. Secondly after a quick google search, for what I have seen usually Phaser's error should contain the proper URL + filename of the img, but this b.png and g.png doesnt make any sense to me ? Am I missing something obvious ? I verifyed the path to the img by typing the full path in the URL ( localhost/workspace/phaserGame/assets/levels/Stage_One_Base.png ) and it loads and displays just fine. Additional info: If this is gonna help, I am running linux mint with xampp as a webserver, installed phaser locally using npm. The image I am trying to load would be used as a background and such is a little big ( 1524x269 ) when I open my webpage all I get is a black screen + the errors, while at the start I was getting the little square ( which while searching google, I found out , that it usually means that my image key-index is correct but phaser can't find the cached image to use ). I am testing it on chromium. And thanks in advance for all of your help =] . P.M. Maybe I should change the title of the post to something more useful/descriptive, any suggestions ?
  18. hi i change melyon.ir loading and control please share your look about that and load time thanks http://melyon.ir/ http://melyon.ir/#fog key arrows for move + Mouse left key down front +Mouse right key down back Mouse wheel look up and down r : back to first position click on menus see tablet we have english version too but not complete yet sorry about that
  19. Loading Texture Issue

    I have a problem loading a texture and then displaying it in a Sprite2D. There's already a topic for it that includes a few versions of zipped projects that reproduce the problem. @Nabroski suggested this might be a bug, so I posted it here. Link to topic: http://www.html5gamedevs.com/topic/23800-loading-texture-what-am-i-missing/
  20. Hi folks! I'm getting the error "Uncaught TypeError: Cannot read property '_size' of null" when creating a sprite manager and setting the scene.useDelayedTextureLoading flag to true. Example in PG: http://www.babylonjs-playground.com/#2IPMDX#2
  21. Hello guys I meet some trouble with BabylonJS and AngularJS. I have an angular project and some babylonJS scripts. I would like to integrate my babylon pages into my pages made with angular. When I just open a babylon page by double clicking, everything is working well. When I ask to angular to open this same page into another page (with a div for instance with ng-include), my 3D environment loads and appears without problems while one second and then all my lights shut down but I still can see my animation working (but in the dark). I have an error in the console "WebGL is not supported". This error does not appears when I'm opening my page alone without angular. I really don't know why angular reacts like that. Does someone has an idea? Hope my explanations were clear, if not, do not hesitate asking me questions Thanks for your help !
  22. 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) { this.name = name; this.TextureBump = "textures/water_river.jpg"; this.id = 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(); BABYLON.Material.dispose.call(this); }; })(); // 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.); } }
  23. So I noticed that a lot of people in here were asking about a loading/progress bar so I came up with my own solution. Let me know what you think var barGreen,barYellow,maxWidth,tween;function create(){ barGreen = game.add.graphics(200,300); barGreen.beginFill(0xEAF516); barGreen.drawRect(0,0,300,50); barYellow = game.add.graphics(200,300); barYellow.beginFill(0x4BFAF7); barYellow.drawRect(0,0,300,50); maxWidth = 300; barYellow.width=0; tween = game.add.tween(barYellow); tween.to({width:maxWidth},1000); tween.start();}Here's the JSFiddle if you want to see what it looks like: http://jsfiddle.net/Batzi/op3grg2w/10/
  24. Hi guys Old dev, but somewhat new to game and js in general. I am working on an idea that is quite large, and I have a little team behind me. We are still in architectural phase, and already many difficulties are cropping up. Not that it's a bad thing during design right? This one is general is my biggest confusion / concern. Map loading. I am not going to call it a map, it might not be the right word, let's say play area. In our case, the play areas are huge (as huge as possible!). We don't want any world bounds to stop a player, they will be able to go as far as we can possibly allow. Of course, integers have limited size, and reality sucks. The following two concerns pop up first. 1. How could I handle/visualise/realise map loading from a central server, if maps are this large and indeterminate. 2. If 1. is doable, how the heck do I know what coordinates to use for a player. A bounded world, have x,y pixels at the least. But what does a huge world have? For 1. I considered the json way, but tiled maps are predetermined, and a map of 80 000x 80 000px, would yield a tiled json file of 4 MB already. Is it really neccesary to use csv/json tilemaps? Considering a sandboxy persistent type game, starting with NOTHING, can we just use good old rendering of images and save these locations/coords (problem 2 above) on the server side? Tldr: Do we have to use tilemaps or go free form? How do we know what the player and object coordinates are. I hope it doesn't seem like rambling. It's a real headache for me right now, as I start the loader code. Cheerios Marlon
  25. Load JS files only if they exist

    Hello there dear people of this awesome forum! I am hoping you can help me with a problem I have: Let's say my game has these files: main.jsplayer.jshud.jsIf hud.js is missing the game won't start. I need a way, so that this would only not show the hud but still execute the rest of the game. Any tips are appreciated, thanks in advance!