Search the Community

Collect the falling books and rack the highest combos as you can to achieve the best score! Watch out for fireballs! A community made game using Phaser 2! Link: https://tinyurl.com/y37jpqua Features: Global Leaderboard, Discord Authentication, Touch Controls, Keyboard Controls Our Discord: https://discord.gg/DfxF3HPKqQ

Hi, I've made this simple game that is actually more an awareness test than a game. You have ten seconds to watch a short movie and then you have to answer 10 questions... Give it a try and let me know your result after your first try! (tester avarege made out 4-6/10) The game is made with Construct 3. All the graphics assets is made with Blender 2.90. Awareness Test - The Robot Bar - Link You can play it from desktop or mobile Enjoy!

If you search for how to detect mobile devices by JavaScript you will find confusing information such as looking for the string "Mobi" in the browser identifier, and other unreliable stuff. In the past people checked screen size but that no longer works because some mobile devices have huge numbers of pixels. Even the usually reliable Mozilla Developer Network pages are contradictory on trying to detect touch screens. They have an article from 2011 which says to check whether the global window object has a property called ontouchstart (except that for Internet Explorer look at navigator.msMaxTouchPoints) but a recently updated (2019) page about TouchEvent (link below) says ontouchstart is still only an experimental proposal, not in the official specification of TouchEvent. So we cannot rely on browsers using it. I came to realise that in searching for "how to detect mobile" I was really asking the wrong question (as are many others). What really matters for my programs is whether the user has a keyboard (and if not, perhaps check for mouse or touch screen). As HTML5/JavaScript programmers (what this site is about) we do not have access to the internal system of the device we are running on, to check its hardware, so how can we do this? Here is my scheme. If a keyboard event occurs we know there is a keyboard. Similarly a mouse or touch event will confirm that the user has other capabilities. So in the constructor of the main program object do the following. this.keyable = false; // Until proven otherwise this.mouseable = false; this.touchable = false; var canvas = document.getElementById ("canvasId"); // Or whatever the id is canvas.addEventListener ("keydown", handleKeydown, false); canvas.addEventListener ("mousedown", handleMousedown, false); canvas.addEventListener ("touchstart", handleTouchstart, false); Then if any of those handlers is ever invoked you can set the corresponding boolean to true. For example (if we assume the global program object is called main): function handleKeydown (ev) { if (!main.keyable) { main.keyable = true; // There is a keyboard main.adjustScreenLayout (); // As necessary } // ... Go on to handle the key supplied in ev } Note that we do not want to adjust the layout every time an event comes in, only when the boolean first changes state. There is a potential problem though. If the user of a mobile device manages to invoke the onscreen keyboard it will generate keyboard events, fooling us. Our HTML5 game will not normally provide any way for the user to do this because we do not have access to the system level. However, if our HTML includes text input fields they would spoil things, so there must not be any such fields in the page. I think there is no way to find out whether key events come from a real or virtual keyboard. I have verified that my Surface Book only fires touch events from the screen, not from the touch pad. The latter fires mouse events. So detecting touch events does seem to indicate a touch screen and maybe that is all I need. If I detect a touch event I will assume that touch is what the user wants to use, regardless of whether there is a physical keyboard, and I should present the appropriate user interface layout. See also https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent (and linked pages) That page shows that InternetExplorer and Safari (desktop) have no support for TouchEvent. That does not break my proposal above. It says that Safari on mobile does fully support TouchEvent.

I'm trying to navigate a mesh with the arcrotatecamera using Firefox on a Surface Book, but the touch is doing some weird things where if i try to alternate between zooming in and out, and gets stuck. What can I do? https://www.babylonjs-playground.com/#12WBC#69

I'm using InDesign to create a page layout for a presentation and then exporting to HTML and embedding a canvas for Babylon in an iFrame. This is awesome, because I get a live 3D window in my otherwise static presentation. The problem is, the html exporter sets things up so the pages auto-scale to "Best Fit" the current device aspect ratio. This is just what I want, but this scaling breaks the BabylonJS GUI because mouse/touch events no longer line up properly with the buttons. For some reason, this problem only happens on my desktop screens (one landscape 2k and one portrait 1200x1920), but touch works with no problem on my Note 8 and recent iPad. I found this answer on Stack Overflow which involves intercepting and transforming mouse/touch events, but I'm not sure how to apply this concept to the prebuilt GUI framework. Is there a generalized solution to getting Babylon GUI touch to work when the canvas is scaled dynamically?

Hello, I am looking for camera examples that can run on mobile and use touch events to implement rotation, zoom operations. Any help will be appreciated.

Hello! I have been working on Phaser 3 development for about a month now and was curious about multi-touch support. We are working on a simple platformer game and single touch is crippling to a mobile user. I read through the dev logs and it seemed like support was "on the way" a few months back. Is this still part of the development road map or has it been shelved for other features?

Hello and <ping> Q: about Touch.... Getting an Offset of the Pointer on the lower right: The grey dot draws the blue line at offset upper left. Reproduced using Chrome in the Chrome Emulator. But first experienced it in a site using BJS 3.0 with both Hand and then PEP - on a Google Pixel. Replicated in a local sandbox, I'll build a playground... It uses this code: scene.onPointerObservable.add(function(){ console.log('movin') },BABYLON.PointerEventTypes.POINTERMOVE); //TODO - initPickEvents = function // ----------------------------------------------------Register Pointer Events. var meshes = centerTiles; //TODO rename tiles and move up with other code. for(var i = 0; i < meshes.length; i++){ mesh = meshes[i]; mesh.actionManager = new BABYLON.ActionManager(scene); // trigger actions mesh.actionManager.registerAction( new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger, function(){ // debugger; console.log('DOWN') }) ); mesh.actionManager.registerAction( new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function(){ console.log('UP') // debugger; }) ); } with this: <canvas id="renderCanvas" touch-action:"none"></canvas> Any tip on things to try? : ) SOLUTION: gotta use meta tag to set device-width. Zing.

I'm working on a project where on mobile version you can use two fingers to zoom in and out, pan and rotate a rectangle. How would that work on a desktop or laptop computer with a mouse? Any suggestions?

Hi, The touch controls in Three.js allow you to move the camera horizontally/vertically using three fingers. I noticed that the ArcRotateCamera in Babylon behaves similar to the Orbitcontrols in Three.js (using the right mouse button you can move horizontally/vertically ) but it does not have the three-fingers gesture implemented. Is there some other way to move the camera using touch or should I file this as "bug"/feature request on github?

I'm working with PixiJS to create a web app with OS-like functionality (source here: https://github.com/steverichey/OpenGNOP) so I obviously need to have stuff related to mouse and touch events. I've tried stuff like this (based on the examples): this.interactive = true;this.mousedown = this.touchstart = this.onClick.bind(this);this.mouseup = this.touchend = this.mouseupoutside = this.touchendoutside = this.onRelease.bind(this);But it's hit or miss. BitmapText will function normally but DisplayObjectContainers may or may not, and Graphics seem to never register clicks. Is there something I'm missing? It appears that all of these elements should support mouse and touch events.

I'm using PhaserCE 2.10.0 and I've setup my game in (256) x (256*aspectRatio) in portrait mode using the SHOW_ALL scale method to size up to the screen. Everything's been going pretty well, but now I've run into a weird issue. I'm just not sure if it's a bug I should report or if I should just be doing something different. On android(in chrome and the cocoon dev app) pointer coordinates(read via input.pointer#.x|y) max out at 104. On desktop, it works just fine, with x coordinates maxing at 255 and y maxing dependent on the screen aspect ratio. Here's a debug shot of my input dev view where I touched 2 fingers down near the center of the screen and moved them to opposite corners of the view. I've tried a few different versions of Phaser 2.10.1, 2.7.10, and 2.4.9 and found that the issue goes away with 2.4.9. Obviously, I could just use an old version for now but... I don't wanna. Anyone with more Phaser experience know what might have changed to cause this? If it helps, here's my init call: App.game = new Phaser.Game({ width: scale.width, height: scale.height, renderer: Phaser.AUTO, antialias: false, resolution: 1 }) Boot state setup: Boot.prototype.create = function _Boot_create() { this.game.time.advancedTiming = App.debug this.game.renderer.renderSession.roundPixels = true this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL this.game.scale.pageAlignHorizontally = true this.game.scale.pageAlignVertically = true this.game.scale.refresh() this.game.state.start("load") } Play state create: Play.prototype.create = function _Play_create() { var scale = Util.scale() this.world.resize(scale.width, 5*scale.height) this.physics.arcade.gravity.y = 750 this.stage.backgroundColor = "#aaddff" this.player = new Player(this) new Floor(this, this.game.world.height) new Platform(this, 64, this.game.world.height - 64, 64, 1) this.camera.follow(this.player.sprite) this.controls = new Input(this) } Input setup for Play state: var Input = function _Input ( scene ) { this.scene = scene this.cursors = this.scene.input.keyboard.createCursorKeys() this.scene.input.gamepad.start() this.pad1 = this.scene.input.gamepad.pad1 this.p1 = this.scene.input.pointer1 this.p2 = this.scene.input.pointer2 this.butt = 0 this.scene.input.gamepad.onDownCallback = function (e) { this.butt = e } }

I've been working with Pixi for quite sometime with V3 up until now. Recently decided it was time to move some code over to version 4 but have been experiencing some issues with interaction events. I have a button class that originally used both listeners for touch and mouse events to a.) change the visual state of the button on up/down etc b.) perform an action on click/tap. This had been working perfectly fine in version 3 and I could have multiple buttons in a class/container. Switching to version 4 this caused issues with click/tap area where only the last button to be added to a particular class/container will fire this event. All buttons will fire the up/dwn start/end events still though. On upon researching I tried converting them all pointer events and still experience the issue. I'm currently using V4.7.0. I've been trying to pick my way through the PIXI source trying to figure out why the event doesn't fire but it's not clear to me. All I can see is that it doesn't seem to have 'trackingData' when processing the up portion when it does on the one that does fire the tap/click. I've being using Chrome only at this point for Dev tools and tried but desktop and mobile/tablet emulator, both having the same result. I know interaction was reworked for v4 but can anyone give me any pointers as to why those changes have affected my code thus. I don't understand well enough the changes to be able to find the right place to look for a solution. I can't provide the exact code at the moment as it's not a personal project and corporate rules prevent me from doing so. But can give an overview. The class is structured with a parent container (essentially a stage) to add class container to and a class container to display the current button state (current button state can be a graphic, sprite, animation). The current button state container has all the interaction events attached to it. These call binded functions within the class which either change the current state sprite or call a function on click/tap that has been passed in the settings on instantiation (event data is sent to this function). As stated if the event is fired, which it is on the last button added, the function is fired but event doesn't trigger for click/tap on the others. All other events fire normally on each button. I've possibly just overlooked something simple as you get to that 'wood for the trees' state. Any thoughts, suggestions would be grateful.

Hey, I have some videos I need manual control over. For non iOS devices, they're working fine. But with iOS devices the videos all automatically play simultaneously on user interaction (which is touch unlocking them). Is there a clean way to flag off autoplay on touch unlocking? Cheers

Hello, I want to show my latest game, Freaky Brothers, the game is created with Construct 3. If someone tries it, I would appreciate sincere comments, about mechanics, graphics etc ... I try to improve with each game, thanks. The html5 version can be played from any device, smartphones, iphones, pc, mac etc ... I also leave the Android version and the Itch.io version. Play Html5: Freaky Brothers Html5 Google Play: Freaky Brothers Google Play Play on Itch.io: Freaky Brothers Itch.io

Hello, I would like to know if it is possible to have screen touch controls on mobile instead of the buttons? In my game i tried having buttons to jump and it functioned correctly... however I am looking for a way to make my character jump wherever we actually touch the screen and not just one specific button. is that possible? Also is it possible to have movement controls such as the attached in Phaser? is this a good example: https://phaser.io/examples/v2/input/virtual-gamecontroller Thank you!

I am making a maze game where the player drags their finger to control a ball moving through a maze. I would love to use Phaser physics to block the ball from moving through the walls. Is there a way to do this with Phaser physics and if so, which physics type would be the best suited for this?

Hello again community, I want to show you this little success for me, Basket Slam Dunk, has been the game that has played the most of all that I have done. It has more than 100,000 games played, a record for me. It is a casual game, easy to play and playable on any device. You have to throw the player and put in the basket, very easy to play, and with unlockable balls. I hope you like it Link : https://html5.GameDistribution.com/1e114557c82349ffa04089dcbfb0605b/

A game I made that is playable here: http://gametheorytest.com/gerry/ Has the input events defined as such: this.sprite.events.onInputDown.add(onInputDownTile, this); this.sprite.events.onInputOver.add(onInputOverTile, this); this.sprite.events.onInputOut.add(onInputOutTile, this); On a computer it works great. On a touch device, there seems to be a lack of sensitivity. So sometimes if you tap and move your finger, it doesn't register a touch at all. Sometimes it will register the first touch, but not pick up the onInputOver on the next tile. Any ideas why this would not be accurate on touch?

Are there any way to enable touch panning for ArcRotateCamera? now we have 1 finger rotate,2 finger zoom,maybe 3 finger for panning?

Hey:-) Im new to babylon (and html5 in general) I'm trying to change camera control to universal camera to enable touch, but can't get it to work.. could someone pls help me on how to get touch (and keyboard) controls to work? here's link to the code: http://www.libak.dk/customizer/ Any help would be much appreciated - phanx :-)

Could someone please tell me how to capture a touch event in phaser? game.input.mouse.onMouseMove = function (evt) { rabbit.x = evt.offsetX - (rabbitWidth / 2);}; The above code works perfectly on a normal screen, but does bugger-all on my iPhone. I see Pixi has some mouse support. http://www.goodboydigital.com/pixi-js-gets-interactive/ I'm looking for the touch position. Help appreciated.

Hey guys, I want to navigate the camera with the touch features from smartphone/tablet. Neither ArcRotate,Free or Touch-Camera works. Is Hand.js necessary? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script type="text/javascript" src="http://cdn.babylonjs.com/2-3/babylon.js"></script> <script type="text/javascript" src="./hand.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> // Get the canvas element from our HTML below var canvas = document.querySelector("#renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // ------------------------------------------------------------- // Here begins a function that we will 'call' just after it's built var createScene = function () { // Now create a basic Babylon Scene object var scene = new BABYLON.Scene(engine); // Change the scene background color to green. scene.clearColor = new BABYLON.Color3(0, 1, 0); // This creates and positions a free camera var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, false); // This creates a light, aiming 0,1,0 - to the sky. var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amount light.intensity = .5; // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 10, 1, scene); // Move the sphere upward 1/2 its height sphere.position.y = 1; // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene var ground = BABYLON.Mesh.CreateGround("ground1", 3, 3, 2, scene); // Leave this function return scene; }; // End of createScene function // ------------------------------------------------------------- // Now, call the createScene function that you just finished creating var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>

My last game, Faraon, created live, about 35 hours of video.Playable from any browser, smartphones, iphones, mac, pc, tablets etc...Rescue your friend through the dangerous rooms hidden in the pyramid of Pharaoh.Test your skill in this fun platform game, Are you a hero? Prove it.Funny and fast platform game.- 55 levels.- 3 different finishes.- Easy to play, one-touch control.- Many traps and enemies await you in the pyramid.- Great and original soundtrack.- Adapted for keyboard and touch screen.- Playable from any device.- Pixelated graphics. Faraon trailerPlay on Itch.IO: Faraon Itch.ioPlay on my Web: Faraon

Trump Burrito Make America great again and Catch the Burritos! Touch the screen and Trump go left or right to catch the burrito. Don't miss the burritos. Beat your friend's scores! Get it for Free: iOS ⇨ https://itunes.apple.com/app/trump-burrito/id1234357590?l=de&ls=1&mt=8Android ⇨ https://play.google.com/store/apps/details?id=com.atilladeniz.trumpburritoHey, friends! This is my new game called Trump Burrito.Completely excited to share with you guys!