Search the Community
Showing results for tags 'Scroll'.
Found 24 results
-
When using Android 4 and the Chrome browser, the index.html page for the Phaser 2 examples will not scroll past the 2 section heading/title lines of text for the animation examples. The farthest I can view is the title lines 'Animation' and '15 examples'. On the device native browser I can scroll the full list of 436 examples but examples like 'Click on an Image' in the 'Basics' section require several browser refreshes/reloads before they will work. Chrome runs 'Click an Image' immediately with no browser refresh required but I can't scroll down to see more examples other than Basics and Games. What fixes or work arounds can I use to handle these two browser problems with Phaser 2 example code?
-
Hello, I have my own scrolling for container, everything worked fine until: I had popup with scrolling over background which could be scrolled as well ? The issue is obvious: while I am scrolling popup, the background is also scrolling. Of course I can improve code and check that pointer down was over container but there are over elements which grab mouse down event and prevents it to be passed to the bottom container. Is there any pattern to resolve this issue? Thanks
-
Hi everyone So I'm back in to looking at Baylon after having to concentrate on other areas of my project first. I'm at the stage now where I'm loading a .babylon file exported from Blender, I'm attaching camera controls to the active camera (configured in blender to be Arc), and I'm using Pep instead of Hand for the interactions because Hand hates me and I don't deserve nice things. Anyway here's the issue, with the camera controls attached as so: scene.activeCamera.attachControl( canvas, false ); everything works fine in Mac safari 11.0.3 and Chrome 63.0.3239.132, but when in Firefox 58.01 the page scrolls as well as the scene when using the mouse wheel to zoom. I've tried setting that false value to true, but all that did was stop scene scrolling everywhere. The canvas element has the attribute: touch-action="none" set in the html and the similar declaration in CSS. This wouldn't be such a problem if the entire scene was the whole page, but in my case the canvas is only part of the visible page. Can someone shed some light on this please? Cheers
-
Howdy, I'm struggling to conceptualize how I would tackle solving the following task. Imagine you have a scene as displayed in the attachment. I would like to bind scroll to moving the camera along a predefined path. Breaking it down into components...how do I: Attach a Camera to a predefined path? Allow a user to move the camera along that path? Any suggestions that might point me in the right direction? @Deltakosh Thanks, JPS
-
Hi all, for example we have 3 type of images(400x600px) for background. and we have the game size (400x600px too). how to better realize the progressively selecting 3 types (or more) of images with auto-scrolling? 1) create 2 images and move their Y-coordinate, then just switching the nameFrame. I think that this decision will slow down the performance of the game. to move so big images. 2) create via tileSprite object and move tilePosition.y, create the bitmap of back1 + back2, scroll them. then re-create the bitmap... and etc. any ideas?
-
Hi, I am completely new to phaser and game dev. I am trying to implement a crossword and would like a scroll bar on the right side so users can scroll to read the clues. (Please see attached image). Does phaser have some pre-built function that can handle this? Thanks.
-
Does Phaser offer any concept of a "Scroll View"? Basically a box you can add content to and swipe up and down? I'm trying to create scrollable list of items. I think I can manually code a scroll view, but I just thought I'd check to see if it already exists first.
-
Hello, I try to develop a game compatible desktop and mobile, but I am faced with a big problem. I managed to handle the scroll of the camera with this great plugin: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ Now I would like to handle the click, in addition to the scroll. I'm comparing pointers in the update function, but no way to differentiate the click pointer and the first pointer of the scroll (the following is good) I'm am already able to detect the first click of a scroll compared to the next with isClick param on : this.game.input.addMoveCallback ((point, x, y, isClick) => {}) But nothing to differentiate a simple click of a first click on a scroll event I tried with a setTimeout but I not get a great result. Any other ideas ? Thank you PS: Sorry for my english (i'm french ^^")
-
Hi guys, I have a strange problem: I load a minimal Phaser game via an AJAX request somewhere in my page, and the scroll positions resets on top of the page... only on mobile, it doesn't happen on desktop. I don't know why and it's driving me crazy. I have set up a minimal code that will reproduce the error on mobile. It is divided in two files. First, the index html where the AJAX request is made: <!DOCTYPE html><html><head> <title>TEST</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.3/phaser.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script></head><body> <div id="box" style="margin-top:2000px"> <div id="test"></div> </div> <button id="btnload">LOAD</button> <script type="text/javascript"> $("#btnload").click(function() { $.ajax({ type: "GET", url: "test2.html", success: function(response) { $('#test').html(response); }, complete: function(xhr, status) {}, error: function() { alert("Error : could not connect to server"); } }); return false; }); </script></body></html>Then the second file that is used to give a response to the AJAX request (that is, an empty Phaser game) : <script type="text/javascript">// GAME OBJECTvar game = new Phaser.Game( 550, // width 380, // height Phaser.CANVAS, // renderer (CANVAS for better compatibility) 'test', // container HTML ID { preload: preload, create: create, update: update }, // available functions false // transparent background);function preload() {}function create() { game.stage.backgroundColor = '#000000';}function update() {}</script>When clicking on the "LOAD" button in index, the Phaser is correctly loaded, but the page resets itself on top. That is not wanted. How can I avoid this problem?
-
Ok, so I'm trying to set up an inventory system for a game of mine in Phaser 2.5.0 and there doesn't seem to be a way to have a scrollable view in for my inventory. I'm trying to make an inventory similar to that of Fallout's where part of the screen scrolls through the items, while the other part shows the item's description and picture (no fullscreen scroll please). Has someone found a work around to this? If I can't use a scroll view would the next best thing be a multi-page inventory? Maybe a grid based one? Any ideas? Thanks!
-
Hello! Can I know which events are fired upon mobile device resizing? They cause some frustrating difficulties in an effort to make developing easier... I want my canvas height to be 1500px and the user to scroll up and down, while the width is equal to the device width. I want NOTHING more. I tried setting meta tags for it, I tried the different Phaser.ScaleManager stuff, but there is always some sodding event that fires and makes this task a pain in the ***. I have this in my index.html to make the user unable to zoom: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> At the bottom of my create function (my game is called "menu"), I have: menu.scale.scaleMode = Phaser.ScaleManager.RESIZE; menu.scale.fullScreenScaleMode = Phaser.ScaleManager.RESIZE; menu.input.touch.preventDefault = false; The preventDefault is false because otherwise, when the player selects an input field in the menu (to sign in their account), they can't deselect it. The other two lines are a bit complicated. If the scaleMode is default, when you scroll (and the address bar in the browser of the device folds), the resize event is fired. For some reason, that makes you unable to scroll or zoom anymore (it disables zoom without the meta tag too). If you change the device orientation - same thing happens. If you toggle fullscreen, same thing happens. All scaleModes have this result. With RESIZE and the property "height=1500" in the meta tag, however, when the address bar folds, the resize event isn't fired and the problem doesn't occur. If you change orientation or toggle fullscreen, it happens again, though. I tried using the setMinMax too, but that just stretches the canvas (and still doesn't fix the scroll problem). The height of the canvas and the body remain the same. I mean, they don't get resized to device height, so that the scroll disappears. The "overflow" property of the body is "scroll" too. I also tried to set the scaleMode to null, so that nothing happens. Well... it still causes this problem. Those problems are not present in desktop, so it's something related to mobile only and the events upon resizing. The only way something kind of works is when the resize event is not fired. To sum it up, here is what I need: inability to zoom the game (with meta tag), 1500px height that can be scrolled up and down and width that is equal to the device width. I want that in both orientations, with and without fullscreen. In case that can't be achieved, I would appreciate a way to prevent Phaser from doing anything upon resize...
-
Hi guys! Help me to improve this plugin of Phaser => https://github.com/jdnichollsc/Phaser-Kinetic-Scrolling-Plugin Regards, Nicholls
-
[SOLVED] line end (pointer position) must be relative to bitmapdata so : bitmapdata center +( pointer.pos - sprite.pos): this.bmd.ctx.lineTo(148+this.input.worldX-this.sprite.x,148+this.input.worldY-this.sprite.y); How does phaser handle such relative positions ? drawLine: function(){ this.sprite.x= player.body.position.x; this.sprite.y=player.body.position.y; this.bmd.clear(); this.bmd.ctx.beginPath(); this.bmd.ctx.moveTo(148,148); this.bmd.ctx.lineTo(148+this.input.worldX-this.sprite.x,148+this.input.worldY-this.sprite.y); //this.input.x-this.sprite.x , this.input.y-this.sprite.y); //this.input.activePointer.position.x+this.sprite.x,this.input.activePointer.position.y+this.sprite.y); //this.input.activePointer.position.x,this.input.activePointer.position.y); console.log(this.sprite.x-this.input.worldX,this.sprite.y-this.input.worldY); //this.sprite.x+this.input.activePointer.position.x,this.sprite.y+this.input.activePointer.position.y); this.bmd.ctx.lineWidth = 4; this.bmd.ctx.stroke(); this.bmd.ctx.closePath(); this.bmd.render(); //this.bmd.refreshBuffer(); this.bmd.update(); } [WAS] -larger than canvas map scrolling - I am struggling to get a simple mouse pointer / player line behaving properly on a 2516x2146 map inside a 960x640 canvas . Looks like mouse pointer position is wrong , not calculating map scroll somehow. I am using this example , which doesn't work as expected in my code : http://codepen.io/codevinsky/pen/dAjDp create: this.bmd = game.add.bitmapData(296, 296); var color = 'white'; this.bmd.ctx.beginPath(); this.bmd.ctx.lineWidth = "4"; this.bmd.ctx.strokeStyle = color; this.bmd.ctx.stroke(); this.sprite = game.add.sprite(player.body.position.x, player.body.position.y, this.bmd); this.sprite.anchor.set(0.5); update: drawLine: function(){ this.sprite.x= player.body.position.x; this.sprite.y=player.body.position.y; this.bmd.clear(); this.bmd.ctx.beginPath(); this.bmd.ctx.moveTo(148,148); this.bmd.ctx.lineTo( this.input.activePointer.position.x,this.input.activePointer.position.y); this.bmd.ctx.lineWidth = 4; this.bmd.ctx.stroke(); this.bmd.ctx.closePath(); this.bmd.render(); //this.bmd.refreshBuffer(); this.bmd.update(); },
-
Hi guys, Help me please to improve my plugin! Codepen: http://codepen.io/jdnichollsc/pen/OVZPwx GitHub: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ See the error: http://screencast.com/t/4iP2kPNJ ( "if i scroll once in the canvas, then click anywhere outside, the canvas also scroll randomly" - Wagyl ) Thanks in advance and Merry Christmas! Nicholls
-
Does Phaser have support for making a scrollable list, as in, one that you can scroll with the mouse wheel, and not just by dragging it? If it doesn't, is there any way I can implement it? Thanks! =)
-
Hi guys! This is my first plugin in Phaser Framework to simulate the horizontal scrolling using the camera http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ Regards, Nicholls
-
Hi guys, This is my example about horizontal scroll in canvas: http://codepen.io/jdnichollsc/pen/Xbqrzd?editors=001 What do you thing? Regards, Nicholls
-
Hello all, currently i'm using a trick to make my game look endless: while i keep moving the camera and the player, i test if the end of the world is near; if yes, my camera will stop to slide soon. Then, i simply change the x coordinate value to 0. Doing the correct math and the correct scenario, the jump will look quite good. But it's not enough. For example, if some item where present in the last portion of the world, it certainly won't be at the begining. It leads to make sure that certain items will use the very same spritre, and so on. Is there any other way to get the endless effect? any effective way to create the illusion? Any idea is welcome.
-
Hi there, I'm using the method autoScroll on my sprite to make it the ground of my game, see https://github.com/maxailloud/Flappy-Plane/blob/using_p2/js/classes/Ground.js#L6. This work great for the displayed sprite but not for its body. Its body is not moving and so the body doesn't match the displayed sprite, as this one is scrolling. Look here http://maxailloud.github.io/Flappy-Plane/ the result, I display the body of each sprite to see the problem. Is there a way, I mean something already existing, to make the same behavior I got on the sprite but on the body on the sprite? I might guess that there is no solution other to do it myself but I ask anyway, just in case.
-
Hi Guys, I've written a small game to act as a banner on my website, however on mobile, where screen space is quite limited, its impossible to scroll the game if you begin the scroll on the canvas element. Does Phaser capture the touch/scroll events, and is it possible to disable them so to let the screen be scrolled? Many thanks! Cameron
-
Hey everyone, as explained in another thread I started, I'm trying to "move the world" instead of moving the player. For that purpose I want to make a tilemap scroll, but I'm not able to. I tried setting TilemapLayer.scrollX and TilemapLayer.scrollY and nothing happened. I even tried something like TilemapLayer.scrollX = player.x * 2; to no avail. How are you supposed to use those functions? /* Game logic */function create() { game.time.advancedTiming = true; game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#000000'; /* Map definition */ map = game.add.tilemap('map'); map.addTilesetImage('magecity', undefined, undefined, undefined, undefined, undefined, 1); map.setCollisionByExclusion([73, 74, 75, 81, 82, 83, 89, 90, 91]); ground = map.createLayer(0); ground.debug = true; ground.resizeWorld(); // Player sprite player = game.add.sprite(game.width, game.height, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); player.body.collideWorldBounds = true; player.anchor.setTo(0.5, 0.5); game.camera.follow(player); HUD = new HeadUpDisplay(game, 'Head up display'); //cursors = game.input.keyboard.createCursorKeys(); upKey = game.input.keyboard.addKey(Phaser.Keyboard.W); downKey = game.input.keyboard.addKey(Phaser.Keyboard.S); leftKey = game.input.keyboard.addKey(Phaser.Keyboard.A); rightKey = game.input.keyboard.addKey(Phaser.Keyboard.D); socket = io.connect('http://poste-0432', { port: 8000, transports: ['websocket'] }); setSocketEventHandlers();}function update() { game.physics.arcade.collide(player, ground); ground.scrollX = 5; //does nothing ground.scrollX = player.x * 2; //nothing if (player.y < 10) { player.x = game.width / 2; player.y = game.height / 2; } if (player.body.deltaX() !== 0 || player.body.deltaY() !== 0) { socket.emit('update player', { x: player.x, y: player.y }); } player.body.velocity.x = 0; player.body.velocity.y = 0; if (leftKey.isDown) { player.body.velocity.x = -150; } else if (rightKey.isDown) { player.body.velocity.x = 150; } if (upKey.isDown) { player.body.velocity.y = -150; } else if (downKey.isDown) { player.body.velocity.y = 150; } player.rotation = game.physics.arcade.angleToPointer(player) + 1.57;}var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update});
-
Hi folks, I have a game built in Pixi, pulled into a website in an iFrame. The game takes up most of the screen except for a menu at top and a footer at bottom. The bottom of the game and the footer are off the bottom of the screen and I want the player to be able to scroll / swipe to see the bottom of the game and the footer of the site. It appears that since almost all of the visible screen is the canvas, the swipes are not picked up by the main site and so the site doesn't scroll. Any thoughts on how to get this to work? Thanks,
-
Hi! I'm trying to do a shop with a catalog of items. Currently the items are text. There is a list of items I want to be in a container. To display all items in the list I have a scroll with an arrow to up and one down. The problem is this., Gotta keep the items inside the container. For example, if I press the down arrow on the scroll the first item leaves the container. Is there any way to keep items inside the container? A greeting.
-
Hello, I have a simple HTML page, which implements just a canvas. When I show it in a browser, everything looks ok, no scrollbars at all. After deploying it with PhoneGap to my device (Sony Experia U), it is possible to scroll just a little horizontally and a little more vertically. I am sure it is because the device has a different aspect ratio and the content (1280 x 720) does not fit, but giving 100% to width (and height) of the canvas should do the trick. I do not know how to prevent the scrolling. Anybody had this problem, and/or does have a solution? This is my complete source: HTML: <!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Game</title> </head> <body> <canvas id="game" width="1280" height="720" style="border:1px solid #000000;"></canvas> </body></html>CSS: html, body { margin: 0; overflow:hidden;}canvas { width: 100%; height:100%;}
