Bodman

Never mind, I figured it out. this.input.on('pointerdown', (pointer, targets) => { this.input.addUpCallback(()=>{ window.open('https://fb.gg/play/freeriderjumps', '_blank'); },true) });

Hi, I'm having trouble with browsers blocking popups. I know the rule is that it needs to be in response to a user action. Is this a bug with phaser? this.input.on('pointerdown', (pointer, targets) => { window.open('https://fb.gg/play/freeriderjumps', '_blank'); }); Thanks

I have figured it out. You need to turn on "Allow messages" from your game. This may be a new change. I don't know but it solved the problem.

I have never got it to return true. Even with updated google pixel on latest android version.

Same problem. Been trying for days.

Great! Thanks for the input! I usually use node-canvas but it requires many non node decencies. I'll have to see about PhantomJS .

For those who have experience with developing out a facebook messenger game bot. Have any of you created a bot that generates images dynamically via user profile images? If so, what is your process for this? Are you using node-canvas? Are you creating the image on the client side and then passing the created image to the bot for future use? How did you tackle this problem? Thanks for any insight you bring Example

I believe it only took a few days. We integrated ads before we submitted the game from the start. I found the people at the official facebook group helpful if you run into problems. https://www.facebook.com/groups/instantgamedevelopers/

Thanks a lot for your Feedback! Yeah the game is not easy haha. Most people rage quit within 100m, so we're working on that. As for the scores not loading, I'm currently working on fixing that . Thanks again

I had fun with it. The API they have is fairly easy to work with. Yes, Advertising is integrated. (Interstitials and Rewarded Videos) . In game purchases are only for Android at the moment and we didn't integrate them. It is possible tho. The organic traffic is fairly good so far from what we're seeing. The platform lends itself well to quick small competitive games.

Hi everyone! With the help of Phaser 3 I introduce... Free Rider Jumps! This is using the facebook messenger platform. The first instant game by Kano . Available on desktop, and mobile . Its a single track. Goal is to get the best score you can. You earn points by going the distance and doing it with style by doing tricks! Mobile & Desktop on Messenger Search "Free Rider Jumps" or try http://m.me/freeriderjumps?game=freeriderjumps Desktop Only on FB https://www.facebook.com/instantgames/183911338963055/ Still some work to do on it, like music / sounds, but the bulk of what we wanted is there. Feel free to give feedback / ask questions.

Much needed

Edit: Never mind. Typescript Type Docs are just incorrect This must be an easy solution, but I can't figure it out. I'm trying to make phaser render with a transparent background, but I'm getting a black background every time. Here is my initialization new Phaser.Game({ type: Phaser.AUTO, width: Config.width, height: Config.height, scene: Scenes, parent:document.getElementById('game'), "render.transparent": true }); Anything I'm doing incorrectly? Thanks again,

It's some how fixed itself. Thanks a ton for the input!

No luck. It seems to be an issue with IPhoneX.

I'm not, but that points me in a better direction, I'll see if that gets triggered. ?

Hi all. I am currently developing a facebook instant game with Phaser 3 for the company I work for. One big issue that I can't seem to debug is that the game periodically loses input if it's backgrounded (as in the messenger app is backgrounded) and brought back to the forefront. One it loses input, it won't regain. It's as if it loses focus and won't refocus. The ticker is still going and it's rendering movement. Has anyone else had this issue? Anything to point me in the right direction would be great help. Cheers,

Thanks a lot ! Glad you like it @DuckfaceNinja

@userbarna Thanks for the feedback! Tech Details Web Interace - Backbone.js - Pubsub Backend - PHP - Custom Framework - MongoDB - Memcached Game - Canvas - Easeljs

@owendeery , Thanks ! Glad you like it. We utilized the Reddit algorithm for trending tracks. We should see better trending results once we release our track creator.

Thanks for your support! Ya , did my best to get it as responsive as i could on all resolutions As for your last question. its not a silly question at all. Canvas Rider was developed by a someone who de-compiled the flash version Free Rider 2 and converted it to HTML5 / javascript without permission from the Free Rider 2 developers.Obviously a serious issue, with legal ramifications, so I won't be getting into any more details,Basically Canvas Rider was using unauthorized Free Rider code and was not a sequel. Free Rider HD is an official sequel where we are working with the original creator. Canvas Rider is no longer being developed.

Free Rider HD Hi everyone I wanted to share** a game that I (along with other team members) have been working on for the last half of 2013. Free Rider HD is a sequel to the classic flash game , Free Rider. Rewritten in HTML5, Free Rider HD performs much better, and is more responsive than its previous versions. It is playable on modern browsers, and most modern mobile devices. Features: 2 vehicles ( more to come ) Asynchronous Multiplayer ( load multiple ghosts at any time , playing against top competitors) Mobile Controls Notifications Track Creator (coming very soon) Campaigns & Achievements (coming soon) We are constantly working on new features / fixing bugs etc. Feel free to give feedback, would love your support , good or bad. Direct game link here http://www.freeriderhd.com Multiplayer race example (6 racers) here Community Forum http://community.freeriderhd.com **I posted in news & links a month back., didn't see this thread.

2 Canvas elements should suffice . 1 for static, 1 for dynamic content. This is really something you are going to have to test on your own. Some older environments do not deal well with multiple canvas elements, where other's do every well.

The only way to achieve what you are trying is to create 2 separate canvas objects, layered on top of each other (they are transparent by default). This is because the default behavior of stage.update is to clear the canvas. var fullCanvas = document.getElementsById('fullCanvas');var chronometerCanvas = document.getElementsById('chronometerCanvas');var stages = {}stages['full'] = new createjs.Stage(fullCanvas);stages['chronometer'] = new createjs.Stage(chronometerCanvas); Then you can call stages['chronometer'].update() without affecting the other canvas.

From a functioning point, code checks out. But with regards to organization. I think it could be improved. I have re-factored the code (non tested). The biggest thing was separating the different objects. Make sure your code reads like a book. One other thing is the bot object, I created a object prototype that extends the paddle object, making it easier to add to. var canvas = document.getElementById('canvas');var c = canvas.getContext('2d');//Notice I do not use self as reference,//Singleton type structurevar Game = { run:function(){ this.ball = new Ball(); this.player = new Player(10, '#0000ff'); this.bot = new Bot((canvas.width - 10) - 10, '#ff0000'); this.score = new Score(this); if(canvas != null){ this.gameLoop = setInterval(this.proxy(this.loop,this),20); } this.initKeyEvents(); }, update:function(){ this.bot.move(this.ball, this.bot); this.ball.move(); this.ball.bounce(this.player, this.bot); this.score.update(); }, draw:function(){ c.clearRect(0, 0, canvas.width, canvas.height); this.player.render(); this.bot.render(); this.ball.render(); this.score.render(); }, loop:function(){ this.update(); this.draw(); }, reset:function(){ this.player.y = (canvas.height / 2) - (player.height / 2); this.bot.y = (canvas.height / 2) - (bot.height / 2); this.ball = new Ball(); }, //This is a helper, allows you to run callbacks in the correct scope proxy:function(method, scope) { return function() { if (FreeRider.developerMode === false) { try { return method.apply(scope, arguments); } catch(e) { } } else { return method.apply(scope, arguments); } } }, initKeyEvents:function(){ document.addEventListener('keydown', function(event) { var player = this.player; if(event.keyCode == 38) { player.y -= player.speed; } if(event.keyCode == 40) { player.y += player.speed; } }); }}//Paddle Objectfunction Paddle(x,color){ this.init(x, color);}Paddle.prototype = { init:function(){ this.width = 10; this.height = 80; this.x = x; this.y = (canvas.height / 2) - (this.height / 2); this.speed = 4; this.color = color; this.score = 0; }, render:function() { c.fillStyle = this.color; c.fillRect(this.x, this.y, this.width, this.height); }}//Ball Objectfunction Ball(){ this.init();}Ball.prototype = { init:function(){ this.color = '#000000'; this.radius = 5; this.X = canvas.width / 2; this.Y = canvas.height / 2; this.speed = 5; this.angle = 0; this.maxAngle = 7; }, render:function() { c.fillStyle = this.color c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI*2, true) c.closePath(); c.fill(); }, move:function(){ this.x += this.speed; this.y += this.angle; }, bounce:function(player, bot){ if((this.x - this.radius) <= (player.x + player.width) && this.y >= player.y && this.y <= (player.y + player.height) ){ this.speed = -this.speed; this.hit = this.y - player.y; if (this.hit <= (player.height / 2) - 1) { hitPercent = ((player.height / 2) - this.hit) / (player.height / 2); this.angle = -(this.maxAngle * hitPercent); } else if (this.hit >= (player.height / 2) + 1) { hitPercent = ((player.height / 2) - this.hit) / (player.height / 2); this.angle = -(this.maxAngle * hitPercent); } } else if ((this.x + this.radius) >= (bot.x) && this.y >= bot.y && this.y <= (bot.y + bot.height)) { this.speed = -this.speed; this.hit = this.y - bot.y; if (this.hit <= (bot.height / 2) - 1) { hitPercent = ((bot.height / 2) - this.hit) / (bot.height / 2); this.angle = -(this.maxAngle * hitPercent); } else if (this.hit >= (bot.height / 2) + 1) { hitPercent = ((bot.height / 2) - this.hit) / (bot.height / 2); this.angle = -(this.maxAngle * hitPercent); } } if ((this.y - this.radius) <= 0) { this.angle = -this.angle; } else if ((this.y + this.radius) >= canvas.height) { this.angle = -this.angle; } } move:function() { this.X += this.speed; this.Y += this.angle; } }//Bot Object (Extend Paddle Object)function Bot(x, color){ this.init(x, color);}Bot.prototype = new Paddle();Bot.prototype._super = Bot.prototype.init;Bot.prototype.init = function(x,color){ this._super(x,color);}Bot.prototype.move = function(ball, bot){ if (ball.y <= this.y + 32) { bot.y -= bot.speed; } else if (ball.y >= (this.y + this.height) - 32) { bot.y += bot.speed; }}//Score Objectfunction Score(gameInstance) { this.game = gameInstance;} Score.prototype = { update:function(){ var gameInstance = this.game; var ball = gameInstance.ball; var bot = gameInstance.bot; var player = gameInstance.player; if (ball.x <= 0) { bot.score += 1; gameInstance.reset(); } else if (ball.x >= 480) { player.score += 1; gameInstance.Reset(); ball.speed = - ball.speed; } }, render:function(){ var gameInstance = this.game; var player = gameInstance.player; var bot = gameInstance.bot; var scoreText = player.score + ' - ' + bot.score; var scoreTextX = (canvas.width / 2) - (c.measureText(scoreText).width / 2); c.fillStyle = '#000000'; c.font = 'bold 20px Arial'; c.fillText(scoreText, scoreTextX, 20); }}