rossi46

Members
  • Content Count

    64
  • Joined

  • Last visited

Everything posted by rossi46

  1. rossi46

    Error set anchor Bitmaptext

    I use typescipt to code my app. When i create a bitmaptext and set anchor for it, but the typescript show error:"Property 'set' does not exist on type 'number | Point'. Property 'set' does not exist on type 'number'.". var txt = new PIXI.extras.BitmapText("0sfsfds", { font: "15px RockerSmall", align: "center" }); txt.anchor.set(0.5); why. Thanks
  2. i use webpack, typescript and pixijs to build my app. But when i build it has error: ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './accessibility' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 34:21-47 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './core' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 18:12-29 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './deprecation' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 30:19-43 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './extract' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 38:15-35 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './extras' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 42:14-33 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './filters' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 46:15-35 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './interaction' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 50:19-43 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './loaders' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 54:15-35 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './mesh' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 58:12-29 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './particles' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 62:17-39 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './polyfill' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 6:16-37 @ ./libs/libs.ts @ multi ./libs/libs.ts ERROR in ./node_modules/pixi.js/lib/index.js Module not found: Error: Can't resolve './prepare' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib' @ ./node_modules/pixi.js/lib/index.js 66:15-35 @ ./libs/libs.ts @ multi ./libs/libs.ts here is my code in libs.ts: import * as PIXI from "pixi.js"; var util = { RandomFrom(min: number, max: number, normal: boolean) { return normal ? (Math.random() * (max - min + 1) + min) : Math.floor(Math.random() * (max - min + 1) + min); }, ParseMoney(money: number, pre: any) { let p = "."; if (pre) p = pre; if (money == undefined) return ""; let strMoney = money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, p); return strMoney; }, NumberToImage(number: any) { var html = ""; var arr = number.split(""); for (var i in arr) { if (arr.hasOwnProperty(i)) { html += (arr[i] === "." ? '<i class="dot"></i> ' : '<i class="n' + arr[i] + '"></i>'); } } return html; }, CountUp(target: any, isCanvas: boolean, isImages: boolean, startVal: number, endVal: number, decimals: number, duration: number, options: any) { var self = this; // default options self.options = { useEasing: true, // toggle easing useGrouping: true, // 1,000,000 vs 1000000 separator: ",", // character to use as a separator decimal: ".", // character to use as a decimal easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo formattingFn: util.ParseMoney, // optional custom formatting function, default is formatNumber above prefix: "", // optional text before the result suffix: "", // optional text after the result numerals: [] // optionally pass an array of custom numerals for 0-9 }; // extend default options with passed options object if (options && typeof options === "object") { for (var key in self.options) { if (options.hasOwnProperty(key) && options[key] !== null) { self.options[key] = options[key]; } } } if (self.options.separator === "") { self.options.useGrouping = false; } else { // ensure the separator is a string (formatNumber assumes this) self.options.separator = "" + self.options.separator; } // make sure requestAnimationFrame and cancelAnimationFrame are defined // polyfill for browsers without native support // by Opera engineer Erik M´┐Żller var lastTime = 0; var vendors = ["webkit", "moz", "ms", "o"]; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = (window as any)[vendors[x] + "RequestAnimationFrame"]; window.cancelAnimationFrame = (window as any)[vendors[x] + "CancelAnimationFrame"] || (window as any)[vendors[x] + "CancelRequestAnimationFrame"]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = callback => { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(() => { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = id => { clearTimeout(id); }; } // Robert Penner's easeOutExpo function easeOutExpo(t: number, b: number, c: number, d: number) { return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; } function ensureNumber(n: any) { return (typeof n === "number" && !isNaN(n)); } self.initialize = () => { if (this.initialized) return true; this.error = ""; if (isCanvas) { this.d = target; } else this.d = (typeof target === "string") ? document.getElementById(target) : target; if (!this.d) { this.error = "[CountUp] target is null or undefined" return false; } this.startVal = Number(startVal); this.endVal = Number(endVal); // error checks if (ensureNumber(this.startVal) && ensureNumber(this.endVal)) { this.decimals = Math.max(0, decimals || 0); this.dec = Math.pow(10, this.decimals); this.duration = Number(duration) * 1000 || 2000; this.countDown = (this.startVal > this.endVal); this.frameVal = this.startVal; this.initialized = true; return true; } else { this.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number"; return false; } }; // Print value to target self.printValue = function (value: any) { var result = self.options.formattingFn(value); if (isCanvas) self.d.text = result; else { if (self.d.tagName === "INPUT") { this.d.value = result; } else if (self.d.tagName === "text" || self.d.tagName === "tspan") { this.d.textContent = result; } else { if (isImages) self.d.innerHTML = util.NumberToImage(result); else self.d.innerHTML = result; } } }; self.count = (timestamp: any) => { if (!this.startTime) { this.startTime = timestamp; } this.timestamp = timestamp; var progress = timestamp - this.startTime; this.remaining = this.duration - progress; // to ease or not to ease if (this.options.useEasing) { if (this.countDown) { this.frameVal = this.startVal - this.options.easingFn(progress, 0, this.startVal - this.endVal, this.duration); } else { this.frameVal = this.options.easingFn(progress, this.startVal, this.endVal - this.startVal, this.duration); } } else { if (this.countDown) { this.frameVal = this.startVal - ((this.startVal - this.endVal) * (progress / this.duration)); } else { this.frameVal = this.startVal + (this.endVal - this.startVal) * (progress / this.duration); } } // don't go past endVal since progress can exceed duration in the last frame if (this.countDown) { this.frameVal = (this.frameVal < this.endVal) ? this.endVal : this.frameVal; } else { this.frameVal = (this.frameVal > this.endVal) ? this.endVal : this.frameVal; } // decimal this.frameVal = Math.round(this.frameVal * this.dec) / this.dec; // format and print value this.printValue(this.frameVal); // whether to continue if (progress < this.duration) { this.rAF = requestAnimationFrame(this.count); } else { if (this.callback) this.callback(); } }; // start your animation self.start = (callback: any) => { if (!this.initialize()) return; this.callback = callback; this.rAF = requestAnimationFrame(this.count); }; // toggles pause/resume animation self.pauseResume = () => { if (!this.paused) { this.paused = true; cancelAnimationFrame(this.rAF); } else { this.paused = false; delete this.startTime; this.duration = this.remaining; this.startVal = this.frameVal; requestAnimationFrame(this.count); } }; // reset to startVal so animation can be run again self.reset = () => { this.paused = false; delete this.startTime; this.initialized = false; if (this.initialize()) { cancelAnimationFrame(this.rAF); this.printValue(this.startVal); } }; // pass a new endVal and start animation self.update = (newEndVal: any) => { if (!this.initialize()) return; newEndVal = Number(newEndVal); if (!ensureNumber(newEndVal)) { this.error = "[CountUp] update() - new endVal is not a number: " + newEndVal; return; } this.error = ""; if (newEndVal === this.frameVal) return; cancelAnimationFrame(this.rAF); this.paused = false; delete this.startTime; this.startVal = this.frameVal; this.endVal = newEndVal; this.countDown = (this.startVal > this.endVal); this.rAF = requestAnimationFrame(this.count); }; // format startVal on initialization if (self.initialize()) self.printValue(self.startVal); } }; class Loader { public loader: any; constructor() { this.loader = new PIXI.loaders.Loader(); } public add(arr: any) { for (let i = 0; i < arr.length; i++) { if (arr[i].id !== "") this.loader.add(arr[i].id, arr[i].src); else this.loader.add(arr[i].src); } } public load(process: any, complete: any) { this.loader.load(); if (typeof process === "function") this.loader.on("process", process(this.loader.process)); if (typeof complete === "function") this.loader.onComplete(complete); } public delete(){ this.loader.destroy(); } }; export {util as Util, Loader }; what wrong with this code. Thanks. I attacked my project. slots.rar
  3. rossi46

    Error set anchor Bitmaptext

    Ok I will try. And how to extend PIXI.Sprite. I want to add some property to sprite like. PIXI.Sprite.value, PIXI.Sprite.inx... I create a class extends PIXI.Sprite: let class Sprite extends PIXI.Sprite{ value: number; inx: number; contructor(){ super(); } } but when i use: let s = new Sprite(TextureCache["something"]), it say: Sprite doesn't have contructor has on parameter. Thanks
  4. I had check. I use @types/pixi.js - it's ok
  5. i use V 4.5. I create a button in my game. When i click button I want to my game full screen in mobile. But when i click button, my console say : "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture." that.btnSpin.on("pointerover", that.btnOver).on("pointerout", that.btnOut).on("pointerdown", that.btnSpinDown).on("touchstart", checkFullScreen).on("click", checkFullScreen).on("mousedown", checkFullScreen).on("tab", checkFullScreen); var checkFullScreen = function () { document.documentElement.requestFullscreen ? document.documentElement.requestFullscreen() : document.documentElement.msRequestFullscreen ? document.documentElement.msRequestFullscreen() : document.documentElement.mozRequestFullScreen ? document.documentElement.mozRequestFullScreen() : document.documentElement.webkitRequestFullscreen && document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  6. How to set and cancel pixi game in mobile. I use some code but not work: if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); }
  7. rossi46

    How to load font in phaser?

    How to load font in Phaser. I use: <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,vietnamese" rel="stylesheet"> and in css, i load: @font-face { font-family: 'Prophit'; src: url("../fonts/V5ProphitDot.eot?#iefix") format("embedded-opentype"), url("../fonts/V5ProphitDot.woff") format("woff"), url("../fonts/V5ProphitDot.ttf") format("truetype"), url("../fonts/V5ProphitDot.svg#V5ProphitDot") format("svg"); font-weight: normal; font-style: normal; } in game, i create: this.textJackpot = this.add.text(this.world.centerX, 24, "0", { font: "42px 'Prophit'", fill: "#fff600", align: "center" }); this.textBalance = this.add.text(this.world.centerX, 24, "0", { font: "42px 'Roboto'", fill: "#fff600", align: "center" }); but It do not work???? How to load it????
  8. rossi46

    how to create effect lines like this?

    ok thanks. i will try and post result here for your help.
  9. How to create effect lines line this. I attack images. Line have change position. Thanks
  10. rossi46

    how to create effect lines like this?

    Here is another example. I think it is particles, but i don't know how to do it.
  11. rossi46

    webgl has hit a snag

    I create pixi game. when i change tab it normal. but when i minimize browser. it has "webgl has hit a snag". and my canvas fail. console log has: "webgl: context_lost_webgl: losecontext: context lost". How to fixed it. Thanks
  12. rossi46

    webgl has hit a snag

    I deleted all game and i just have create canvas it is hitting the snag. I load one image size 1110x624 and just create game loader.add("iconsAnimation", ConfigSt.BASE_URL + "assets/images/anim.png"); this.game = new PIXI.Application(1140, 500, { antialias: false, transparent: true, resolution: 1 }); //this.game.ticker.speed = 2; //this.game.ticker.minFPS = 60; $("#gamePlay").append(this.game.view); this.mainContainer = new Container(); this.containerColumn1 = new Container(); this.containerColumn2 = new Container(); this.containerColumn3 = new Container(); this.containerColumn4 = new Container(); this.containerColumn5 = new Container(); this.effectContainer = new Container(); this.iconsContainer = new Container(); this.mainContainer.addChild(this.containerColumn1, this.containerColumn2, this.containerColumn3, this.containerColumn4, this.containerColumn5, this.iconsContainer); this.game.stage.addChild(this.mainContainer, this.effectContainer);
  13. rossi46

    webgl has hit a snag

    here is memory of my game. I do not use particles.
  14. I want to create a graphics timer. how to do that. Link demo: http://jsfiddle.net/m1erickson/P2qTq/
  15. I use pixi timer plugin. it works on pixi 3.0.8 but not work on 4.5.1. How to fixed and build it. Link: https://github.com/Nazariglez/pixi-timer Or how to use eventemitter as timer
  16. rossi46

    how to user pixi timer or eventemitter?

    I use original example of pixi-timer. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pixi.js Test</title> <script src="https://pixijs.download/v4.5.3/pixi.min.js"></script> <script src="js/pixi-timer.js"></script> </head> <body> <script> var renderer = new PIXI.autoDetectRenderer(800,600); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); function animate(){ window.requestAnimationFrame(animate); renderer.render(stage); PIXI.timerManager.update(); } animate(); var timer = PIXI.timerManager.createTimer(1000); timer.repeat = 15; timer.on('start', function(elapsed){console.log('start')}); timer.on('end', function(elapsed){console.log('end', elapsed)}); timer.on('repeat', function(elapsed, repeat){console.log('repeat', repeat)}); //timer.on('update', function(elapsed, delta){console.log('update',elapsed, delta)}); timer.on('stop', function(elapsed){console.log('stop')}); </script> </body> </html> it doesn't run.
  17. rossi46

    how to user pixi timer or eventemitter?

    i've just tried pixi 4.5.3. it didn't work. i say "Cannot read property 'update' of undefined", but when i use pixi 3.0.8, it works. I use file pixi-timer.js in plugin. I use many timer in game. ticker can replace for setTimeout??
  18. rossi46

    mask on renderercanvas errror?

    when i create some mini game with other canvas in one page. the main slots games tween very lag. How to prevent that. example site: http://zon.club. Use iframe in the main slot canvas??? Thanks
  19. rossi46

    mask on renderercanvas errror?

    I created a slot game. But in some browser does'n't support webgl. It auto render canvas. But when i used mask. It doesn't work correct??? it wrong position. I use console of browser to change position of mask, but not effect???? mask position set not effect on canvasrenderer mode.? how to anchor graphics mask? when resize the game. the mask is not resize? My code: this.game = new PIXI.Application(800, 450, { antialias: true, transparent: true, resolution: 1 }); $("#game-container").append(this.game.view); this.mainGroup = new Container(); this.effectGroup = new Container(); this.game.stage.addChild(this.mainGroup, this.effectGroup); //create group this.containerColumn1 = new Container(); this.containerColumn2 = new Container(); this.containerColumn3 = new Container(); this.containerColumn4 = new Container(); this.containerColumn5 = new Container(); this.mainGroup.addChild(this.containerColumn1); this.mainGroup.addChild(this.containerColumn2); this.mainGroup.addChild(this.containerColumn3); this.mainGroup.addChild(this.containerColumn4); this.mainGroup.addChild(this.containerColumn5); this.mask = new Graphics(); this.mask.drawRect(0, 0, 606, 330); this.mask.position.set(97, 43); this.mainGroup.mask = this.mask; how to anchor mask when resize game??
  20. rossi46

    mask on renderercanvas errror?

    thank for your help. How smothie slot game. When i open 4 tab of game and spin. It lag and not smooth. how do maximum performance and fps smooth?? i usually create prototype and after one sence i destroy all container. have any good idea to manage memory, my game init about 120mb after many spin slots, memory up to 1gb or greater than that. thanks. Sorry for my bad english
  21. rossi46

    mask on renderercanvas errror?

    thanks. i did it. it work perfect
  22. rossi46

    mask on renderercanvas errror?

    can you give me an example. or how to set position of mask as sprite mask when game canvas resize. thanks
  23. rossi46

    mask not run?

    i create mask in my game but in some pc, it not run? Here my code that.mask = new Sprite(TextureCache["mask"]); that.mask.position.set(that.size[0] / 2 - 8, that.size[1] / 2 - 12); that.mask.anchor.set(0.5); that.mainContainer.addChild(that.mask); that.mainContainer.mask = that.mask;
  24. rossi46

    mask not run?

    No. I use the lastest chrome on pc window 10. firefox is normal
  25. rossi46

    mask not run?

    I use sprite mask