Search the Community

Can you create a alphaMask from bitmapdata rather than images? I have a circle loader that I am building as bitmapData and I have the source image I want to mask, but I can't figure out how to use the mask bitmap data for bmd.alphaMask or convert the mask bitmapData to a image that the method can use. Any help would be appreciated. createPie : function (game, w, h) { console.log("create pie", w, h, this); var mask = game.add.bitmapData(w, w), bmd = game.add.bitmapData(w, w), canvas = bmd.canvas, context = bmd.ctx, size = 270, degreesToRadians = function (degrees) { return (degrees * Math.PI) / 180; }; var drawPie = function () { bmd.clear(); context.save(); var centerX = Math.floor(w / 2); var centerY = Math.floor(w / 2); var radius = Math.floor(w / 2); var startingAngle = degreesToRadians(270); var arcSize = degreesToRadians(size); var endingAngle = startingAngle + arcSize; context.beginPath(); context.moveTo(centerX, centerY); context.arc(centerX, centerY, radius, startingAngle, endingAngle, false); context.closePath(); context.fillStyle = 'rgba(0, 0, 0, 1)'; context.fill(); context.restore(); bmd.render(); }; drawPie(); game.cache.addBitmapData("loaderMaskBMD", bmd); var maskImage = game.add.image(348, 221, bmd); console.log("maskImage", maskImage); // doesn't work //game.cache.addImage("loaderMaskImage", maskImage); game.load.onFileComplete.add(function (progress) { console.log("load", progress); size = (360 / 100) * progress; drawPie(); }); // doesn't work //mask.alphaMask('preloaderRingLoaded', maskImage); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getBitmapData("loaderMaskBMD")); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getImage("loaderMaskImage")); var sp = game.add.sprite(348, 221, mask); sp.width = w; sp.height = h; console.log("sp", sp);},

My image keeps displaying as a green box with a cross through it, even though I'm nearly exactly the same loader event code given in the examples given here and here. My code looks something like this, but for some reason the image is always displayed as a geen box with a line through it, as though it failed to load the image correctly. Any insights as to what this might be? I promise it's not a typo! var config = { type: Phaser.AUTO, width: 1000, height: 600, scene: { preload: preload, create: create, pack: { files: [ { type: 'image', key: 'loading', url: 'assets/laptop.png' } ] } } }; var game = new Phaser.Game(config); function preload () { loading = this.add.image(500, 300, 'loading'); var progress = this.add.graphics(); this.load.on('progress', function (value) { progress.clear(); progress.fillStyle(0xffffff, 1); progress.fillRect(300, 270, 800 * value, 60); }); this.load.on('complete', function () { progress.destroy(); loading.destroy(); }); //...load other files } .

Hello everyone. The problem is I want to immediately display the loading screen. I don't want to see a black screen before the loading screen.I followed the example shown in phaser.io, http://examples.phaser.io/_site/view_full.html?d=loader&f=load+events.js&t=load events, but the loading progress always remains at 0. I can't figure out what the problem is. Can you help me? my boot state looks like this init: function () { game.stage.backgroundColor = "#012358"; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; }, preload: function () { atlas = game.load.atlas('mysprites', 'im/sprites.png', 'im/spritesJson.json'); game.load.spritesheet('anim', 'im/myloaderSheet.png', (animationFrameWidth + spaceBetweenFrames), animationFrameHeight, 30); }, create: function () { game.state.start('Loading'); } and my loading state looks like this preload: function () { game.load.json('txts', 'scripts/text.json'); game.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); game.load.start(); }, create: function () { myTxts = game.cache.getJSON('txts'); bg = game.add.tileSprite(0, 0, 1280, 720, 'mysprites'); bg.frameName = "bg"; animation = game.add.sprite((game.world.centerX - 25), (game.world.centerY - 50), 'animation'); loadingBar = new Phaser.Rectangle(game.world.centerX, spriteY, 10, 3); anim.animations.add('playAnim', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], true); anim.animations.play(playAnim', frameRate, true); game.load.onLoadStart.add(loadStart, this); game.load.onFileComplete.add(fileComplete, this); game.load.onLoadComplete.add(loadComplete, this); }, update: function () { loadingBar.inflate(1, 0); console.log(game.load.progress); }, render: function () { game.debug.geom(loadingBar, '#FFFFFF'); } function loadStart() { console.log('Loading'); } function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) { console.log("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles); loaded = true; } function loadComplete() { if (loaded) { changeState("Level 1"); loaded = false; } }

I'm working on a game with several states, a mainmenu state, level select, game state etc. and I use a preloader which loads all the graphics and sounds needed for all these states. There is also a cut-scene state, which contains an intro (and outro) to the game's story. This cutscene state is heavy on graphics, I mean it uses about 1/3rd of MBs of the graphics files and these graphics files are only used in this state. It is possible to just play the game and skip the intro entirely and most players will not see the outro (game ending) on the first few tries. So most of the time players will not see this cutscene state and I don't want to waste bandwidth on always loading these graphics. Also once the player gets to the cut scene they can play it more than one time, so once the graphics are loaded they don't need to be loaded again. I read that this process is called "Lazy loading" So my question is; How can I "lazy load" the graphics of just this one state? There is a preloader state that loads assets for all states, but only this one state is an exception. And on a side note; how do I check if graphics are already loaded so I can only load them once?

I'm creating a custom preloader as described in here: http://doc.babylonjs.com/tutorials/Creating_a_custom_loading_screen 1) In this preloader I'd like to be able to display the loading progress. Is there no support for it yet? 2) Loaded meshes are displayed automatically in the loading screen before I get the chance to hide them. Is there a way to not automatically add loaded meshes to the scene? A workaround for this might be using 2 scenes, but I was hoping for a prettier solution.

Hi all, I am currently running into Phaser's problems on the preload state with the code snippet as below class Preload extends Phaser.State { constructor(game, progress,cacheKey,progressDisplay) { super(game, progress,cacheKey,progressDisplay); this.progress = progress; this.cacheKey = cacheKey; this.progressDisplay = progressDisplay; } loadStart(){ let box = this.make.graphics(0, 0); box.lineStyle(8, 0xFF0000, 0.8); box.beginFill(0xFF700B, 1); box.drawRect(-50, -50, 100, 100); box.endFill(); this.spinner = this.add.sprite(this.world.centerX, this.world.centerY, box.generateTexture()); this.spinner.anchor.set(0.5); this.add.tween(this.spinner.scale).to( { x: 0, y: 0 }, 1000, "Elastic.easeIn", true, 250); } preload(game,progressDisplay){ let center = { x: this.game.world.centerX, y: this.game.world.centerY }; game.load.image("player", Images.lander); game.load.spritesheet("asteroids", Images.asteroid, 64, 64, 30); game.load.onLoadStart.add(this.loadStart,this); let loadingText = new Text(this.game, center.x, center.y); loadingText.anchor.set(0.5); var timerEvt = this.game.time.events.loop(100, function (){ if(progressDisplay <= 100){ loadingText.text = 'Loading...'+(++progressDisplay)+'%'; } else{ game.time.events.remove(timerEvt); let loadingText = new Text(this.game, center.x, center.y); loadingText.text = 'Completed'; game.add.tween(loadingText).to({alpha: 0}, 500, Phaser.Easing.Linear.None, true); game.load.onLoadComplete.add(this.loadComplete, this); } }, this); } create(){ this.game.state.start('GameState'); } loadComplete(){ this.create(); } } Somehow the this.game.state.start('GameState'); was executed before the Complete text could fade out. Is there anyway to resolve the bug where to get the complete text to fade out first then execute the GameState? Thanks.

Hi, How can I implement a preloader when a video has just changed source? I haven't found a moment, event or something when I can use: anim_Loading.animations.play('Rota'); anim_Loading.visible = true; And when to use: anim_Loading.animations.stop('Rota'); anim_Loading.visible = false; I've tried using play before "video.changeSource" and stop after "video.play()" but sometimes it doesn't nothing and sometimes the code crashes because "play() conflicts". Any ideas? Thanks!!

Hi, We have used asset manager to import meshes into scene with the default loading UI. How can we show the progress of the load as can be seen in the link http://webtrude.com/Models/hs00/trial4 Also can anyone post a babylonjs playground example for implementing a custom loading UI. Thanks

I've started using Howler.js for audio in some simple games. It takes care of loading sounds, but doesn't seem to have any preloading mechanism to fetch files before a Howler (sound clip) is created, i.e., in-game. Does anybody have any thoughts on how best to preload for it so sounds are ready to go as soon as the action starts? At the moment I'm leaning toward having Howler figure out which codecs to use, and then downloading the appropriate files so they're at least in the browser cache. Possibly I'll rework Howler a bit to use a cache internally. Is anyone aware of such a thing already? Thx

Hi , i am new to phaser , and can't resolve this problem from about a day wasted on it. while preloading my image does not show , i have attached a snapshot . here is the code i have used for preloading function preload() { game.load.image('preloaderbar','assets/preloaderbar.png');LoadingProgress = game.add.sprite(game.world.centerX-100,game.world.centerY,'preloaderbar');game.load.setPreloadSprite(LoadingProgress,0);} Thanks in advance.

I'm new to Phaser and I like it. It has everything I need to make a new html5 game quickly but there is a problem: In the examples provided there is no any preloader example. All we know that preloader must have it's resources preloaded in order to display some kind of beautiful background or animation while loading the rest of data. I've tried adding onLoadComplete listener and then, when preloader resources got downloaded, there is no hope on loading the game data. GameInstance.loader just shuts down and never invokes even after reset(); I suppose there are some state changing mechanisms for that, but I would like to avoid those deeps. There is no documentation on that and I ask you to help me with that weird situation.

Hi, I'm new to Phaser, but not game/sprite engines. Javascript has some quirks I'm still getting used to, and perhaps this is one of them. My question is this: Why do I need to assign a different 'id tag' to an image for sprites to behave as separate instances? For example (preload function): game.load.image('reel', 'reel.png');game.load.image('reel2','reel.png');game.load.image('reel3','reel.png');Then, in my create function, I instantiate a couple custom classes (where the sprite itself resides): r1 = new Reel({x:201,y:130,img:'reel',cb_stop:cb_r1_stop});r2 = new Reel({x:201+128+10,y:130,img:'reel2'cb_stop:cb_r2_stop});r3 = new Reel({x:201+128+10+128+10,y:130,img:'reel3',cb_stop:cb_r3_stop});(class constructor where sprite resides): s = game.add.sprite(args['x'],args['y'],args['img']);Problem: So if I do not make these 'reel','reel2','reel3' any cropping, moving, or other modifications I make to the sprite itself (yes, separate instances as they are wrapped in their own class) I make to the sprite itself will apply to all 3 sprites no matter what -- as if it's modifying the image resource, not the sprite. As a temporary work around I just made 3 separate resources, but that can't be right, can it? Sooo, I'm doing something wrong. I'm just flying through the tutorials, so it's likely there's some other way to add/work with sprites and I'm missing it?