Search the Community

Showing results for tags 'loader'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 82 results

  1. One atlas many json for spine

    I want to use one atlas for many spine animations in my game. I found the way how to do it with loader. I am loaded atlas with game loader (name other.atlas) and got in game.loader.resources.other. Then i am trying to load json file of my animation from console. otherLoader = new PIXI.loaders.Loader() spineLoaderOptions = { metadata: { spineAtlas: 'game.loader.resources.other' } }; otherLoader.add('someJson', 'static/img/content/fullHD/machine/elements/testJ.json', spineLoaderOptions) .load() But it will not work. Loader still wants to load atlas with name of my json. GET http://localhost:3004/static/img/content/fullHD/machine/elements/testJ.atlas 404 (Not Found) I think it is because of atlas parser . I need varibale "pages" in my metadataAtlas, but there is no pages. How atlas data looks like in console. I am doing something wrong and i dont know what.
  2. 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 :: Thank you! <3 Mythros
  3. Hi guys I have problems using cross origin resources, as I tested direct load of image is working, but the spritesheet & mp4 I still can't get it work, here is some use cases: // it works var image = PIXI.Sprite.fromImage(CROSS_ORIGIN_URL_IMAGE); // not work and showing the error message // Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded var videoTexture = PIXI.Texture.fromVideo(CROSS_ORIGIN_URL_MP4); var video = new PIXI.Sprite(videoTexture); // my json file is at local, and the image is on cdn server, so I change baseUrl right after add function, the image is loaded successfully, but when I try to use it, it shows the similar message // pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at ... may not be loaded. PIXI.loader.add("/src/image/spritesheet.json"); PIXI.loader.baseUrl = CDN_SERVER_BASE_URL; PIXI.loader.load(() => { var image = PIXI.Sprite.fromImage(FRAME_KEY); }); the response header has the property "access-control-allow-origin: *", and the same mp4 URL works fine in DOM element, am I missing something?
  4. Loader in Pandajs 2

    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.tap = this.changeScene.bind(this, "Main"); }, changeScene: function(go) { game.system.setScene(go); var playbg ='bb', true);, 0.2); }, }) //END Start }); Anybody knows what wrong with onProgress on the Loader. /Lars
  5. Hello, I created a LoadingBar class which contains a loading bar and a background. I load the resources of the LoadingBar in my Boot state and the loader works. The problem is that my LoadingBar has a background that has width 100% of the game width. And height 100% of the game height. When the resources of my state are loaded the create method is called. When the create method is called all the created sprites overlap the background of my LoadingBar. I don't want to destroy my LoadingBar when the resources are loaded but only when the "create" method has finished, because it creates the maps/buildings/sprites/characters/enemies... and other things. So I want to destroy/hide my Loading screen only when all sprites are created (only when the create method has finished to create the world). But when they are created they immediately overlap my background. So the question is: what can I do to the background of the LoadingBar to make it be always the highest z-index? class World extends Phaser.State { preload () { this.loadingBar = new LoadingBar(); // load sprite sheets.. music.. .. } create () { buildMap(); // Houses overlap the background of the loading screen buildJoypad(); // Joypad buttons overlap the background of the loading screen build... build..... // done this.loadingBar.destroy(); } }
  6. Hi there, I have one single OBJ file with several objects within. Each element has its unique name. Is it possible to load each object as a single mesh? Tried to do this: var parts = []; obj.onSuccess = function (task) { for(var i = 0; i < task.loadedMeshes.length; i++){ parts.push(task.loadedMeshes[i]); parts[parts - 1].material = uniqueMat; ... } } But it seems that each next mesh / geometry has all previous ones like an avalanche. Loading OBJ with 5 similar spheres as a test Geometry {delayLoadState: 0, _totalVertices: 266, _isDisposed: false, id: "c0d23769-a422-47c5-8060-fabd67a55b1a", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 532, _isDisposed: false, id: "e83a4890-a107-425d-969c-eea1f356e200", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 798, _isDisposed: false, id: "19b85286-2066-4ef7-9e95-bba19d906e71", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 1064, _isDisposed: false, id: "22bc102d-1acc-4fa8-9576-77a9915e666f", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 1330, _isDisposed: false, id: "3eb8eab7-1871-4fed-b484-c18fc881cb23", _engine: Engine…} main.js:234 0
  7. hi guys, I have a perhaps very basic question about loader, When we use loader to load an image, what has it been done, or been uploaded to where? It still delay on it's first render after loaded, unless using prepare plugin upload it to GPU.
  8. hi all, i just want to konw how to use the binary files exported by 3dmax using Max2Babylon-0.8.0. when i export from 3dmax i got a list of binary files which one should i use.
  9. PIXI Loader & Audio (Howler etc)

    Hi all I've just started on my second prototype for a game, only this time I'm wanting to sort out a few more of the core parts to it first. Audio being the one I'm tackling at the moment. I have a basic setup atm a loader and a few sprites to test. Upon finishing the load (including a music mp3 file) it runs a startGame function which then plays the audio track. I originally tried using the pixi-audio plugin from GitHub, but could not get this one to work at all (does it still work with PixiJsV4?) so moved onto Howler Howler does work, and plays the audio file once loaded. However after trying on my server it seems the loader doesn't fully load the mp3 file before continuing as it starts to play a good 5-10 seconds later after the startGame function has run. Do mp3 files work the same as any other file with the Pixi loader? or could this be an issue with howler that I have missed? Thanks for any advice!
  10. Resources to load are specified with a list of .json files generated by TexturePacker. I need to cancel caching so intend to append "file.png?123456" unique numbers to every file specified within .json files. I specified middleware to do that but somehow middleware is actually called for file.png even before it is called for file.json Is it possible to modify contents of loading .json files on the fly? Or just solve such problem in any other way?
  11. I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(;
  12. Just in case someone needs it (cause I did). This configuration change the template to export json file compatible with Phaser game.load.atlas function Download from my repo: Just download the .sbx file and double click it.
  13. The problem of the sprite key

    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?
  14. 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: 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"); } } }); });
  15. 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?
  16. How to properly load scripts

    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?
  17. 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.
  18. Load assets asynchronously

    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
  19. 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
  20. Phaser Manifest Loader

    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! Cheers, Matt.
  21. 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!
  22. 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
  23. Can't display video

    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: 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: 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.
  24. 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
  25. question about cdn loader in phaser

    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.