datvm

Members
  • Content Count

    10
  • Joined

  • Last visited

About datvm

  • Rank
    Member

Contact Methods

  • Twitter
    datvm93
  1. Recently I need to update a HTML element from the game each frame. The box element itself is seperated, and my game use States. I also realize if I use State, the update method of the Game is never called. Is there any "global" update that I can use, no matter which State I am using?
  2. Hello, I have a Splash Screen that show my game's logo and loading banner (two simple Images). In the create() method, I create a loader myself and load other resources. However, IE11 could not load the resources (Chrome works fine, I haven't tested Firefox yet), and the onLoadComplete event is not fired. There are multiple warning message in IE's Console: Phaser.Loader - active loading canceled / reset(usually 5 time) Below are the code and screenshot: /// <reference path="/src/init.js" />/// <reference path="/lib/phaser/phaser.js" />MusicArena.SplashScreen = function () { Phaser.State.call(this); this.loadFinished = false; this.counter = SPLASH_TIME;};MusicArena.SplashScreen.constructor = MusicArena.SplashScreen;MusicArena.SplashScreen.prototype = Object.create(Phaser.State.prototype);MusicArena.SplashScreen.prototype.preload = function () { this.game.load.image("splash", "/asset/splash.png"); this.game.load.image("loading", "/asset/loadingbanner.png");};MusicArena.SplashScreen.prototype.loadResouces = function () { var loader = new Phaser.Loader(this.game); loader.onLoadComplete.add(this.onLoadComplete, this); loader.image("crown", "/asset/crown.png"); loader.spritesheet("btnOption", "/asset/buttons/option.png", 460, 130); loader.image("inthebag", "/asset/inthebag.png"); loader.spritesheet("btnPredict", "/asset/buttons/predict.png", 100, 100); loader.image("host", "/asset/host.png"); loader.image("users", "/asset/users.png"); loader.image("bet", "/asset/coin.png"); loader.spritesheet("btnBack", "/asset/buttons/back.png", 50, 50); loader.image("charm", "/asset/charm.png"); loader.image("hint", "/asset/hint.png"); loader.spritesheet("btnClose", "/asset/buttons/close.png", 480, 80); loader.spritesheet("ranks", "/asset/ranks.png", 64, 64); loader.spritesheet("predictionResult", "/asset/result.png", 64, 64); loader.image("cup", "/asset/cup.png"); loader.spritesheet("ranks", "/asset/ranks.png", 64, 64); loader.spritesheet("btnLeaderboardDaily", "/asset/buttons/leaderboard_daily.png", 120, 40); loader.spritesheet("btnLeaderboardWeekly", "/asset/buttons/leaderboard_weekly.png", 120, 40); loader.spritesheet("btnLeaderboardMonthly", "/asset/buttons/leaderboard_monthly.png", 120, 40); loader.spritesheet("btnLeaderboardAll", "/asset/buttons/leaderboard_all.png", 120, 40); loader.spritesheet("btnLeaderboardTop", "/asset/buttons/leaderboard_top.png", 120, 40); loader.spritesheet("btnLeaderboardPersonal", "/asset/buttons/leaderboard_personal.png", 120, 40); loader.spritesheet("btnCreateRoom", "/asset/buttons/createroom.png", 240, 50); loader.spritesheet("btnJoinRandom", "/asset/buttons/joinrandom.png", 240, 50); loader.spritesheet("btnShop", "/asset/buttons/shop.png", 300, 70); loader.spritesheet("btnSearch", "/asset/buttons/search.png", 50, 50); loader.spritesheet("btnChangeAvatar", "/asset/buttons/changeavatar.png", 150, 50); loader.spritesheet("btnLeaderboard", "/asset/buttons/leaderboard.png", 150, 50); loader.spritesheet("btnStartGame", "/asset/buttons/startgame.png", 480, 60); loader.image("money", "/asset/money.png"); loader.image("btnEquipped", "/asset/buttons/equipped.png"); loader.spritesheet("btnEquip", "/asset/buttons/equip.png", 120, 50); loader.spritesheet("btnPurchase", "/asset/buttons/purchase.png", 120, 50); loader.spritesheet("btnOptionFillIn", "/asset/buttons/option_fillin.png", 225, 120); loader.audio("sndPredictionCorrect", "/asset/sfx/ambience_prediction_correct.mp3"); loader.audio("sndSelection", "/asset/sfx/Selection.mp3"); loader.audio("sndResult", "/asset/sfx/This is our land.mp3"); loader.audio("sndBuy", "/asset/sfx/buy.mp3"); loader.audio("sndCorrect", "/asset/sfx/correct.mp3"); loader.audio("sndCrowd0", "/asset/sfx/crowd0.mp3"); loader.audio("sndCrowd1", "/asset/sfx/crowd1.mp3"); loader.audio("sndCrowd2", "/asset/sfx/crowd2.mp3"); loader.audio("sndCrowd3", "/asset/sfx/crowd3.mp3"); loader.audio("sndJoin", "/asset/sfx/join.mp3"); loader.audio("sndPick", "/asset/sfx/pick.mp3"); loader.audio("sndSlide", "/asset/sfx/slide.mp3"); loader.audio("sndWrong", "/asset/sfx/wrong.mp3"); loader.audio("sndCorrect", "/asset/sfx/correct.mp3"); loader.audio("sndEquip", "/asset/sfx/equip.mp3"); loader.audio("sndStartGame", "/asset/sfx/startgame.mp3"); loader.start();}MusicArena.SplashScreen.prototype.onLoadComplete = function () { this.loadFinished = true; this.add.tween(this.lblBanner).to({ alpha: 0 }, 500, Phaser.Easing.Linear.None, true);};MusicArena.SplashScreen.prototype.create = function () { this.sprSplash = this.add.sprite(CAM_WIDTH / 2, CAM_HEIGHT / 2, "splash"); this.sprSplash.anchor.set(0.5, 0.5); this.sprSplash.scale.set(CAM_WIDTH * .75 / this.sprSplash.width); var lblBanner = new Phaser.Image(this.game, CAM_WIDTH - 5, CAM_HEIGHT - 5, "loading"); lblBanner.anchor.setTo(1, 1); this.add.existing(lblBanner); this.lblBanner = lblBanner; this.loadResouces(); this.game.ambienceManager = new MusicArena.AmbienceManager(this.game); this.game.ambienceManager.playMenu();};MusicArena.SplashScreen.prototype.update = function () { deltaTime = game.time.elapsedMS / 1000; this.counter -= deltaTime; if (this.counter <= 0 && this.loadFinished) { var portalScreen = new MusicArena.PortalScreen(); MusicArena.game.state.add("portal", portalScreen); MusicArena.game.state.start("portal"); };}MusicArena.SplashScreen.prototype.shutdown = function () {} Is there anything I do wrong?
  3. Thank you very much! It is a bit of much work, but it does work.
  4. Thank you, I also found this example: http://phaser.io/examples/v2/display/generate-texture-from-graphics Just curious though, the method convert to Texture perfectly. Why do I need BitmapData, is there something better for? And, most the example, the Loader uses a url to load resources. Now that I already have Texture, how can I use it for loading Spritesheet? I mean, my graphics has 2 frames, 1 for Out and 1 for Over for button, but I can't seem to load it?
  5. Let look at a simple example: I draw a simple circle inside a rectangle. Now I want to draw thousands of them on the screens. Is it possible to reuse the drawn graphics then "clone" them instead of having to draw each? I just moved from LibGdx to this engine, in LibGdx, there is a Pixmap that works similar to a Texture. Is it possible in Phaser?
  6. When I initialize a Text and add to Stage, everything works fine except the `fill` style. I even tried to copy the example: var text = new PIXI.Text('This is a pixi text',{font : '24px Arial', fill : 0xff1010, align : 'center'});The font is correct, but the color is always black. Is this a bug or am I doing something wrong?
  7. datvm

    v3 loader

    Nice! Thank you, never knew this before.
  8. Sorry, please nevermind, just went full retard. Anyway, here is the code in case anyone meet this in the future: renderer.backgroundColor = 0xFFFFFF;
  9. Now that we no longer use Stage, is there a quick way to set the game background color other than drawing a `Graphics`?
  10. datvm

    v3 loader

    Can you please check the once Complete again? I used that for my loading, and close the loading screen on complete, but the images are not loaded, they are just black and load later? Tested on Chrome 42 and IE11. P.s: not PIXI related, but I am pretty new to Javascript OOP, please tell me if I am using a good way to keep reference of GameScreen from `loadResources` to `onLoadCompleted`, because `this` in `loadResources` and `onLoadCompleted` are different? GameScreen.prototype.loadResources = function () { this.textures = {}; this.sprites = {}; this.loader = new PIXI.loaders.Loader(); this.loader.add("map", "/Images/map.png"); this.loader.add("card_fold", "/Images/Cards/card_fold.png"); for (var i = 0; i < 33; i++) { this.loader.add("card" + i, "/Images/Cards/card_" + i + ".png"); } for (var i = 0; i < 4; i++) { this.loader.add("token" + i, "/Images/Tokens/token" + i + ".png"); } var gs = this; this.loader.once("complete", function () { gs.onLoadCompleted(gs); }); this.loader.load();};GameScreen.prototype.onLoadCompleted = function (gameScreen) { { // Map var sprMap = new PIXI.Sprite(gameScreen.loader.resources["map"].texture); sprMap.width = CAM_WIDTH; sprMap.height = CAM_HEIGHT; gameScreen.stage.addChild(sprMap); gameScreen.sprites.map = sprMap; } { // Tokens for (var i = 0; i < 1; i++) { var sprToken = new Token(gameScreen.loader.resources["token" + i].texture); sprToken.x = 776; sprToken.y = 601; sprToken.rotation = -0.35; gameScreen.stage.addChild(sprToken); } } { // Folding Cards for (var i = 0; i < 33; i++) { var sprCard = new Card(null, gameScreen.loader.resources["card" + i].texture); sprCard.x = 710 - i + CARD_HALFWIDTH; sprCard.y = -30 - i + CARD_HALFHEIGHT; sprCard.rotation = 0.342; sprCard.mousedown = sprCard.touchdown = gameScreen.onCardClick; gameScreen.stage.addChild(sprCard); gameScreen.sprites.foldingCard = sprCard; } } gameScreen.ready = true; $("#lbl-loading-text").html("Load completed<br />Touch anywhere to play."); $("#loading").attr("data-close-at-touch", "true");}