Search the Community

Showing results for tags 'loader'.



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

  1. Hi, Often I come with the "problem" that I start a game using separated images and later I pack them in a texture atlas. I say a problem because when you create the sprites from separated image files yo do something like this: // load the single image filesgame.load.image("bird", "assets/bird.png");game.load.image("dog", "assets/dog.png");...// create the sprites using the images keysgame.add.sprite(10, 10, "bird");game.add.sprite(20, 20, "dog");Ok, but when I decide to migrate the game to use texture atlas I come with the problem that my "create" code gets broken, why? because I should use add an extra (frame) parameter: // load the texture atlasgame.load.atlas("atlas1", "assets/atlas1.png", "assets/atlas1.json");...// create the sprites using the atlas key and the frame namegame.add.sprite(10, 10, "atlas1", "bird");game.add.sprite(20, 20, "atlas1", "dog");As you can see, I had to change all places where I create the sprites and that's a bit tedious and even error prone. Do you know if there is any way in Phaser to avoid this? A solution I see is to introduce a concept like a "key namespace", something like:// in case of images the last parameter is the namespace (default can be "global")game.load.image("bird", "assets/bird.png", "animals");game.load.image("dog", "assets/dog.png", "animals");// to create an sprite with the birdgame.add.sprite(10, 10, "animals.bird");// in case of texture atlas all frame names are registered under the "animals" namespacegame.load.atlas("atlas1", "assets/atlas1.png", "assets/atlas1.json", "animals");// so to create an sprite with the bird is the same as in images:game.add.sprite(10, 10, "animals.bird"); Or maybe just we can introduce a new "globalKeys" parameter to load the atlas: var globalKeys = true;game.load.atlas("atlas1", "assets/atlas1.png", "assets/atlas1.json", globalKeys);...// somewhere in Phaser.Loader is registered that "bird" is linked to the "atlas1" frame "bird"game.add.sprite(10, 10, "bird");Am I missing something?
  2. I am trying to load texture atlas dynamically. The load happens when the user clicks on canvas. At the same time an animation fires. The next time the user clicks on canvas, previously loaded animation runs. Perhaps it is best to demonstrate the problem. I uploaded the files on a test server. You can see the delay here: http://forwardingsolutions.club/test1/px3.html. I hardcoded the first animation load, meaning that you will see a delay on second canvas click. Run this code on a low end mobile device, and you will se a huge delay. I am getting a 4s delay on a motorola G and 0.5s on an iphone 5. What can I do solve this annoying issue? you can inspect the code on a website, but I will also paste it here: $(function(){ var current; var next; var canRunNext = false; var isAnimating = false; var firstRun = true; var container = document.getElementById("canvas-container"); var app = new PIXI.Application(550,584,{transparent:true}); var canvas = container.appendChild(app.view); setupCanvas(); loadRotationsAndCurrent(); var infiniteLoader = PIXI.loader; function setupCanvas(){ $(canvas).attr("id","canvas"); if (window.screen.width < 600){ $(canvas).css("width","100%"); $(canvas).css("height","100%"); $("#canvas-container").css("width","100%"); }else{ $("#canvas-container").css("width","50%"); } } function loadRotationsAndCurrent(){ PIXI.loader .add(['jimages/1s.png.json']) // load all rotations .load(onRotationsLoaded); } function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); next.visible=false; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); next.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(next); // app.renderer.bindTexture(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); canRunNext=true; console.log("next loaded"); }); } } function setupFrames(name){ var frames = []; for (var i = 0; i < 30; i++) { var val = i < 10 ? '0' + i : i; // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame(name + val + '.png')); } return frames; } function onRotationsLoaded(){ // all rotations loaded current = new PIXI.extras.AnimatedSprite(setupFrames("1_000")); current.x = app.renderer.width / 2; current.y = app.renderer.height / 2; current.anchor.set(0.5); current.loop=false; current.animationSpeed = 0.5; current.visible = true; isAnimating = false; current.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(current); } var run = true; $("#canvas").on("click touch touchstart",function(){ if (firstRun && !isAnimating){ loadNext(); isAnimating=true; current.gotoAndPlay(0); console.log("first run"); firstRun=false; }else{ if (canRunNext && !isAnimating){ isAnimating=true; next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); });
  3. Hello everyone I´m having some issues with the Loader in Pandajs 2 When i do the following: this.loader.onStart = this.setGame.bind(this); this.loader.onComplete = this.loadingGame.bind(this); this.loader.start(); Everything is just fine: But when I try to make a onProgress the onProgress does not response: this.loader.onStart = this.setGame.bind(this); this.loader.onProgress = this.processGame.bind(this); this.loader.onComplete = this.loadingGame.bind(this); this.loader.start(); I can see it, and trace it in the Loader.js class : onProgress: function() { //console.log(this.percent); //if (this.barFg) this.barFg.scale.x = this.percent / 100; } Her is a simple implementation I done: game.module( 'game.start' ) .require( 'game.assets' ) .body(function() { game.createScene('Start', { backgroundColor: '#5ca282', init: function() { this.loader = new game.Loader(); this.loader.onStart = this.setGame.bind(this); this.loader.onProgress = this.processGame.bind(this); this.loader.onComplete = this.loadingGame.bind(this); this.loader.start(); }, //END init setGame: function() { console.log('started'); }, processGame: function() { console.log('percent'); }, loadingGame: function() { document.getElementById('loading').style.display = "none"; this.startContainer = new game.Container().addTo(this.stage); if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { this.mytastatur = new game.Sprite('tastatur').addTo(this.startContainer); } else { this.mytastatur = new game.Sprite('uden-tastatur').addTo(this.startContainer); } this.mytastatur.position.x = game.system.width / 2 - this.mytastatur.width / 2; this.mytastatur.position.y = 0; this.mytastatur.interactive = true; this.mytastatur.click = this.mytastatur.tap = this.changeScene.bind(this, "Main"); }, changeScene: function(go) { game.system.setScene(go); var playbg = game.audio.playMusic('bb', true); game.audio.setVolume(playbg, 0.2); }, }) //END Start }); Anybody knows what wrong with onProgress on the Loader. /Lars
  4. If I start my PIXI project by loading some 'png' resources I need to do loader.add(...).load(setup); function setup(loader, resources) { //... } But what if I don't need those resources to start my project? I am currently using: window.onload = function() { //... } Is this the right way to do or is there any other more PIXI-ish way?
  5. currently thats how I am trying to load the level1 state js file into my current state, however when I try to call game.state.start('level1'); it fails to find the mentioned state. I am doing something wrong but unable to find any documentation to address this exact issue. Or should I just stick to including the state files in the script tags of the game html page?
  6. var sprites = {};var loader = PIXI.loader.add('cloudstars',"imgs/cloudstars.jpg").load(function (loader, resources){ sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); }).add('star1',"imgs/star1.png").load(function (loader, resources){ sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); }).add('star2',"imgs/star2.png").load(function (loader, resources){ sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); }).add('star3',"imgs/star3.png").load(function (loader, resources){ sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); }).add('star4',"imgs/star4.png").load(function (loader, resources){ sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); }).add('ship',"imgs/ship_blue.png").load(function (loader, resources){ sprites.ship = new PIXI.Sprite(resources.ship.texture); }).add('shield_straight',"imgs/shield_straight.png").load(function (loader, resources){ sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); }).add('shield_edge',"imgs/shield_edge.png").load(function (loader, resources){ sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); }).add('title_ship',"imgs/title_ship.png").load(function (loader, resources){ sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); }).once('complete',function(){ var ready = setTimeout(accountSetup,3000); }).load() This seams to work but I figure it's not the correct way to do this as I kinda guessed my way through some of it. Will this cause a problem if I use this method to load all of my sprites into a standard javascript array for use later on? Talking about maybe 100 sprites including some tiling sprites for backgrounds. Also do I really need to use the "loader" in "function(loader, resources)" part? I don't seem to use it inside the function.
  7. Hi, To make the preload faster, I need to load several assets after the preload phase, and use then when they has been loaded. To do that, I've used the Phaser.Loader object and register to "onFileComplete" Phaser.Signal to catch the file when has been loaded, to load the next file. This works well until I need to change the current state and there are an asset being loaded. When the file is loaded and the new state has been created, Phaser detects that the Loader is not loading (processLoadQueue method from Phaser.loader) and shows this message: 'Phaser.Loader - active loading canceled / reset', and the "onFileComplete" registered functions, are not fired, and I cannot continue loading more assets. My idea was to attach to "onStateChange" signal and stop/pause the current async download, but there are no public methods in Phaser.Loader to do that. Are there a good way to load assets asynchronously with state changes? Thanks
  8. Hello, I'm working on PixiJS application where I dressing up my character. So, different PNG images are loaded to Pixi stage. There is a button to finish dressing character and it saves current canvas to gallery using .toDataURL() method. The problem is that during image changing the user can click finish button to save canvas to gallery, but the image is not already loaded in browser, so it result in missing image in canvas data. The example of adding hair image to stage: function dressUpCharacter(callback) { hair_texture = PIXI.Texture.fromImage(hair_img); hair = new PIXI.Sprite(hair_texture); stage.addChild(hair); if (callback && typeof(callback) === "function") { callback(); // callback -> unlock finish button } } As You can see, I already made callback to unlock finish button when my dressing function finishes. The thing is that javascript code completes successfully and adds canvas image to stage, but the image needs few seconds/miliseconds (depending on internet speed) to load in browser. During that time if user clicks finish button it can result with incomplete canvas. Is there any way I can detect canvas images are fully loaded? I saw that PIXI has loader with loader.once('complete', callback) method, but I don't know how to use it. Many thanks in advanced! Josip
  9. plugin

    Hi all, I have just released Phaser Manifest Loader for those using webpack. I've been using this code in production for a while now, it makes it super easy to load assets via a simple manifest. Check it out! https://github.com/mattcolman/phaser-manifest-loader Cheers, Matt.
  10. Hi, `Loader#pack` works as follow: It first downloads the json file using XHR and then all the related assets. `Loader#onPackComplete` is triggered when json file was downloaded and all assets were enqueued in its internal queue. What if I would like to be notified *ONLY* when all related assets of current pack were downloaded?? How can I achieve this kind of behaviour assuming that I'm downloading multiple packs! Thank you!
  11. Hey guys, We just released a new loader for Babylon.js to read OBJ (and MTL) files. This loader is now part of Babylon 2.2 (but it's working on 2.1). As it's a loader, it is an external file that should be included in your project in you want to use it (as explained here) Here is a demo: give it some time, we tried to load BIG files Can you guess which game these assets are coming from ? I hope you will like it! Cheers
  12. Hi, I'm having some issues trying to load and display an MP4 video in a sprite, which also need to loop endlessly. I'm using the loader class in order to be sure that the video is loaded. The video is loaded and I don't get any errors, but the video is not showing. Then I try using the code from the samples page and I can hear the video, but I can't see it (codepen sample line 53 through 78, comment out the other code first). Also I want to loop the video and I used the code I found in this issue: https://github.com/pixijs/pixi.js/issues/1872 But this code doesn't returns the HTML video element: var video = texture.baseTexture.source; So it doesn't have a loop property on it. To confuse me even more, I tried the loader code with a newest version (currently working with 4.0.3) and from version 4.1.0 and up I'm getting errors when I try to create the video texture: Uncaught TypeError: source.addEventListener is not a function(…) pixi.js:23585 In that case all I have in the loader callback is this: function loaderComplete(){ console.log( videoLoader.resources.testVideo ); // on load complete create the video texture var videoTexture = PIXI.Texture.fromVideo(videoLoader.resources.testVideo); } And also tried to create a video base texture but I get the same error. Here is a simple codepen sample: http://codepen.io/rhernando/pen/a556304479d6a44bfa5b698e40b18307/?editors=0010 As you can see I'm not getting any errors on loading the video, and the video is actually loading. In fact I added an image to the loader and I had no problems with that. The issue appears with the video. Thanks, Rodrigo.
  13. 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
  14. Hi guys, I am using phaser to dev a game, currently I got a problem that, I want to deploy my assets resource on a cdn, so I need to make a resource loader for these assets. the basic logic is that firstly I will start fetch the resource from cdn, after serval seconds, if I can not get the resource, I will switch the way to get the assets from local. for the phaser, I do not know how to check if game.load.image/ game.load.atlasJSONHash can get the corresponding resource. so is there anyone have idea how should I handle this, thx.
  15. I have been trying to add a loading screen to my game. I know that I need to use .on('progress') and .once('complete') handlers. I run following code for loading an asset batch; assetManager.loadImageBatch = function(args, callback){ var ctr = 0; var toLoad = args.assets.length; args.assets.forEach(elm=>{ loadFile(elm.name, args.pathPrefix + elm.path); }) function loadFile(name, path){ assetManager.loader.add(name, path); assetManager.loader.once('complete', loadCallback); assetManager.loader.load(); } function loadCallback(){ console.log("loading"); ctr++; if(ctr == toLoad) callback(); } } it runs ok, loads all assets but as it has to log "loading" after loading each asset, it logs it after loading the whole asset batch. I tested it on both local and on my website. It results the same, nothing to do with download speed or whatsoever. I googled about loading screen usage on pixi but I wasn't able to find anything useful. Any thoughts?
  16. Hello everyone Hope someone could help me with the following: this.loader = new game.Loader(); this.loader.onComplete = this.loaded.bind(this); this.loader.onProgress=this.onProgress.bind(this); this.loader.start(); Its the onProgress which not is working. I´ll tried: this.loader.onProgress(this.onProgress.bind(this)); Heres how i call my assets: game.module( 'game.main' ) .require( 'game.assets', 'game.objects', 'game.settings', 'game.start', 'game.level2', )
  17. In my game I want a single tilemap loaded for each room as the player enters them. I made a function that loads a tilemap, where the name of it is the parameter: new_room: function(name) { this.load.tilemap(name, 'assets/tile/' + name + '.json', null, Phaser.Tilemap.TILED_JSON); map = this.game.add.tilemap(name); foreground = map.createLayer('foreground'); map.setCollisionBetween(1, 100000, true, 'foreground'); },The name of the tilemap I'm trying to load is "second", but it's not working: "Phaser.Cache.getTilemapData: Invalid key: "second"" phaser.min.js:16"Phaser.TilemapParser.parse - No map data found for key second" phaser.min.js:20I feel like there could be some feature in Phaser that does what I'm trying to do. I'm not familiar with dynamically loading things.
  18. Hello, I'm trying to implement some retry logic for when Loader fails to load an asset. Currently I've extended the Loader class, and I'm playing around with altering the fileError method to retry downloading the same asset if it fails, but I'm not quite sure what to add here. Has anyone done anything like this before? Thanks!
  19. Hi, So I've been asked to put an advert into the game I'm working on which may change over time. I want to load details about the advert to show (e.g. image and URL to open) so I'm preloading a JSON file which is stored alongside the game. Annoyingly (although, ironically, correct in this context), trying to get the Phaser pre-loader to load the JSON file gets blocked by my AdBlocker! Is there something I need to tweak to let it through or an alternative way to do this? I would have thought this is a worrying issue if you were to load non-advert related stuff...
  20. I am currently working on something which uses Pixijs and it's Loader to load textures. Because I am supporting different screen sizes, I construct everything that is tile-able big while the page is loading, and save it at least one tile bigger than the screen resolution. I do this because rendering 1 big texture is easier than 800 small textures. Now I wonder is there a neat way to add PIXI.Graphics objects or textures to the PIXI.loaders.Loader? - Thankful NexusNull.
  21. Hi, I am having problem loading texturepacker .json file on android device. Pixi code: var loader = Loader.add('images/sprites.json').once('complete', onAssetsLoaded).load(); Here is the error message: chromium: [INFO:CONSOLE(0)] "XMLHttpRequest cannot load content://com.company.test.AVC.files/assets/images/sprites.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, https.", source: content://com.company.test.AVC.files/assets/index.html (0) My app is packed into apk using Corona SDK. (I packed html projects before w/o problems) This is my first Pixi project displayed inside Corona's WebView... Are there known issues between Corona and Pixi?
  22. I have a material in JSON format as per https://doc.babylonjs.com/generals/File_Format_Map_(.babylon)#materials. How can I parse and use this as a material in my scene?
  23. Is there any way to manually add frames from an atlas to an animation by specifying x,y,length,width? I don't want to bother with json/xml files, they're frustrating to work with,
  24. Hello, I want to add percentage of loading assets below the default babylon screen loader with the single text "Loading assets x %..." using loading screen. x=(number of loading asstes / 100)*total assets. I have found informations in http://doc.babylonjs.com/tutorials/How_to_use_AssetsManager#using-loading-screen and http://www.babylonjs-playground.com/#1WXS3J But my question is how to get number of loading asstes in my scene and total assets is the number of mesh and textures in my babylon file? Finally where i have to put this function ? Thanks
  25. Hi all, I'm still beginning on learning how to use babylon js, so for now i just playing a little with babylon playground. right now i just make play ground to combine example of using extention .obj loader and function of drag and drop at default babylon playgorund sample. the play ground i make is working (what i mean is the drag & drop is function and the .obj file is loaded) but i found something funny here, how to fix it maybe : - the ground(camera) can't rotate if i not drag and drop any object before - the .obj file why is it so small, is there a way to make it bigger like the example of using .obj loader ? - when i try to drag the 3D object, the object separate like : when i click and drag "bane" i just drag their 3d feet, body, head or cloth differently, not all full body of the 3D object and it looks quite funny to see it I wonder how to fix this. here my playground : http://www.babylonjs-playground.com/#HV0EA thanks alot, wayan