Search the Community

Showing results for tags 'touch'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 80 results

  1. 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
  2. Tablet touch camera

    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>
  3. 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
  4. Trump Burrito

    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!
  5. Are there any way to enable touch panning for ArcRotateCamera? now we have 1 finger rotate,2 finger zoom,maybe 3 finger for panning?
  6. Multi Touch Rotate?

    Hi there, I am new here, and am just digging into Phaser. I was wondering, if anybody succeeded in adding rotation with two finger touch gestures into their games? Any help appreciated :-) Thanks, Jamirokwai
  7. Hello, I'm very new to Javascript (and coding). I just finished my first game, a clone of Pong. I have it controlled via the mouse movement, now I'd like to add code that will let the user swipe up or down on a touchscreen and have that relate the to controls for the mouse. Any Help would be appreciated. Thanks in advance. Here is what I have for my mouse controls. window.onload = function() { canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); var framesPerSecond = 30; setInterval(function() { moveEverything (); drawEverything(); }, 1000/framesPerSecond); canvas.addEventListener('mousedown', handleMouseClick); canvas.addEventListener('mousemove', function(evt) { var mousePos = calculateMousePos(evt); paddle1Y = mousePos.y - (PADDLE_HEIGHT/2); }); } code help.tiff
  8. Hi All, I have a mesh that is a background, and you can move the other meshes on top of it (and a record the movement). It's very similar to this example: http://babylonjs-playground.azurewebsites.net/#U0YL2#0 what I would like to do is keep the smaller mesh contained within the larger one. Ideally, I would like to allow users to move the smaller mesh outside the larger one, but not completely off of it (there would still be like a 25px edge of the mesh so you could still touch it and move it). I am sure I can just compare the xy of the smaller mesh and compare it to the area of the larger mesh, but I'm wondering if there is something that is already being computed that I can use. Thanks, Jeff
  9. Hello everyone, I'm new to the game development realm. I am in the process of creating a game that will receive touch input from a PQ Labs Multi-touch overlay screen. The screen will support 32+ touch points. I would like to ask if anyone has tried creating or created a game with a similar type of multi-touch screen. If yes, could you share your insights and advice? This display comes with its own drivers and provides various SDKs, none of which is in JavaScript. I am not sure if the input is considered by the system as native touch, since I don't have the screen yet (I'll have it in a week or so). Supposing I overcome the issue of reading input from the screen and using it in my Javascript application, what could be the best way to go about using Phaser's input methods with this screen? Would I need to hack into the Input api? I hope what I ask makes sense. Thanks for the help in advance.
  10. Hi, I implemented a two finger zoom using the game.camera.scale propierty to zoom the game. I also implemented a drag functionality using game.camera.x and game.camera.y propierties. But now I need to add static floating sprites, such that they are always in the same position on the screen regardless the zoom or the drag movement. But when I add them as sprites (game.add.sprite) they are affected by the camera propierties (x,y,scale). I read this and set fixedToCamera to true, it works partially, the (x,y) is static, but the when I zoom in (increase game.camera.scale) the size of the floating sprites also increases. Is there any way I could add sprites that are not dependent on the camera? Thanks!
  11. Phaser + Mobile app

    Hi guys, i'm starting with phaser and i'm reading a couple of tutorials. I create an app with one of these tutorials and I'm using Intel XDK to test on my smartphone. I'd like to ask you, what I need to use at the script to recognize the touchscreen to walk. On web I can use the keyboard (up down left right) to walk. If you can link me any tutorial that helps with this, or a link from a question on this forum too, i'll be thanks. Thank you.
  12. Crazy Racers

    Hello everyone, this is Crazy Racers. It's my first personal project [Play the Game] The game is an fast-pacing racing game. Features: 12 Different tracks 6 Different Cars (each car has it's own style) Different Obstacles 3 different game modes Leaderboard Game modes: Grand Prix: You race a number of tracks, the racer with more points win a trophy Quick Race: Race one track with 5 other opponents Time Trial: Race alone to try to get to the leaderboard Feedback are welcome, I hope you like this game Game is Available for Non-exclusive License and Re-skins, contact me for me details and for the full version of the game Cheers,
  13. viarbox vr

    Hi I have viarbox vr http://www.viarbox.com/b2c-viarbox-google-cardboard-shop Which camera sould I use "Web VR Free Camera" or "VR Device Orientation Free Camera" ? Is there any example(s) or tutorial(s) or playgound(s)? How can we have touch events on phone screen for navigation (moving roration) in scene? Can anybody help me to try this with babylonjs? Is there any blog or documentation how to do that. Especially how to move/rotate with touch events on mobile screen? Greetings Ian
  14. Iorana! I have just a little question about onInputOut behaivour in mobile/touch devices. I have this scenario in Phaser 2.6.2: A small lovely Sprite with inputEnabled activated to handle events, connected with events.onInputOver and events.onInputOut, just for hover actions. No problems there. If I test it in desktop, the signals are dispatched correctly if I move the mouse over the sprite and then move it away from it. But in mobile/touch the behaivour is different. Obviously, you can't "move" a touch Pointer like a mouse, but anyways if you tap the sprite events.onInputOver is dispatched. BUT, after that, if you tap other place somewhere in the screen there's not any events.onInputDown signal, resulting the game acting if there's still hovering the sprite. But keeping pressed the touchscreen and move Pointer it dispatch the desired signal. I know one can make workaround to handle this (if it is mobile check in the next tap, if the pointer is inside bounds of the sprite: If not, manually dispatch events.onInputOut signal), but I have the doubt in mind if this is the correct behaivour of the signal or not. (Probably not, but there's always a bug possiblity). I checked the docs and there's not much thing to say about the event: As yoy can see, the docs don't cover this particular case. If someone explains me this well if this must be work or not... Thanks in advance
  15. My post about control mechanisms in JavaScript games was just published on Mozilla Hacks blog. It introduces a series of MDN articles about Implementing game control mechanisms: Mobile touch controls Desktop mouse and keyboard controls Desktop gamepad controls Unconventional controls The basic examples are available on GitHub at github.com/end3r/JavaScript-Game-Controls And the articles are using Phaser-based game Captain Rogers: Battle at Andromeda demo as a case study.
  16. how to detect double tap

    I've seen that there is a double tap rate that can be set, but does anyone know how to read this? Thanks
  17. Setup: There are multiple display objects which are at the same level on the scene hierarchy graph. These display objects have overlapping hit areas (e.g. they are near each other and/or the hit areas are large) The user touches the area where the hit areas intersect It seems that pixi will trigger the touchstart event on only one of these display objects. How do I get the event to fire on both? My Goal: I have multiple objects which the user can drag around the scene. However, I want to allow the user to be quite inaccurate with their finger, so that if they attempt to drag an object which is near, AND there is no object directly underneath their finger, that object will be picked up successfully. If there are multiple object near the event, then the closest one should be picked up. This is the motivation for the above question.
  18. 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 ^^")
  19. Fire bullet to predefined angle

    Hi Guys, So I'm flying a space ship using the accelerometer and gyro.js, with gyro.js I calculate the angle the ship is flying in. Now I want to fire a laser when I touch my mobile device's screen. The laser should fire in the direction the ship is flying in, no matter where the user touches the screen. I've searched for a couple of hours, but still didn't find a way to make this work. Any ideas? function fire(angle) { if(game.time.now > bulletTime) { bullet = bullets.getFirstExists(false); if(bullet) { bullet.reset(player.x, player.y + 8); bullet.rotation = this.game.physics.arcade.moveToObject(bullet, game.input.activePointer, 500); bulletTime = game.time.now + 200; } }}This is what I have got so far, and this works. But it doesn't fire in the direction the ship is flying in. ps. I've calculated the angle with the following code: var anglePlayer = Math.atan2(o.y * 20, o.x * 20);anglePlayer *= 180/Math.PI;anglePlayer = 180 - anglePlayer;player.angle = anglePlayer;
  20. Drag and drop without frame lag

    I've been trying to implement drag and drop for some of the sprites in my project. I've managed to get it working to some extent using code that I found in a tutorial/example somewhere - the exact source escapes me, apologies. (It's in typescript but should be pretty much recognisable as js) constructor() { this.on("mousedown", this.startDrag); this.on("mouseup", this.endDrag); this.on("mouseupoutside", this.endDrag); this.on("mousemove", this.onDrag); } private startDrag(e: PIXI.interaction.InteractionEvent) { this.dragging = true; e.data.getLocalPosition(this.parent, this.lastDragPos); } private endDrag() { this.dragging = false; } private onDrag(e: PIXI.interaction.InteractionEvent) { if (this.dragging) { e.data.getLocalPosition(this.parent, this.dragPos); this.position.x += (this.dragPos.x - this.lastDragPos.x); this.position.y += (this.dragPos.y - this.lastDragPos.y); e.data.getLocalPosition(this.parent, this.lastDragPos); } } However this approach seems to have a number of problems. The deal breaker here is that the object is always one (or maybe even more??) frames behind the mouse. To me this is unacceptable and leads to all kinds of nonsense like needing the mouseupoutside event to work properly. There are a whole lot of edge cases, like letting go of the dragged object when it's over another draggable object causes problems, etc, etc... I'm guessing that the first problem is caused because this is using the event system and isn't coupled to the render loop. Is there a better way to do drag and drop in PIXI? Also open to any hints on mouse interaction in general, the documentation hasn't been hugely helpful to me (i.e. what's the purpose of the interactionManager?) Thanks!
  21. Hi there, a quick question for which i cannot find a working answer. Let says i am in a PIXI Class that represent a button. I have this line : this.touchend = this._onEnd; And the _onEnd function body is as follow : this._changeState(0); this._released = true; if (this.onClick === null) { this.onClick(e); } What i want to be able to do is allow the touchend event to propagate back to window, but without using the following line : plugins.interaction.autoPreventDefault = false; Is it possible to have a particular event propagate while other are still prevented? Thanks in advance for any light you can shed on this problem. -Jim
  22. Click on sprite reflect on things under it

    Hi, I have a problem that i think be simple. When i click on a button/sprite, the tilemap is clicked too. I want that the click on button/sprite not reflect on tilemap. https://www.dropbox.com/s/malml7b8vhuyeum/Screenshot%202016-04-20%2013.41.30.png?dl=0 Thanks.
  23. 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.
  24. Hi All, I would like to use babylonjs from a touch device. Zoom in and zoom out by means of pinch works in a touch device (mobile/ tablet) http://www.babylonjs-playground.com/#AMEB6#0 Panning works on pc by holding CTRL+Drag. What is the best way to implement panning on a touch device ? one touch drag would rotate the scene. Will it be possible if I want to use 2 touches and drag to pan ? Regards Rajkumar
  25. Hello! I have a major problem with touch input on sprite buttons. I have some letters as buttons and by default the hitArea was only as big as the letter itself, which was sometimes hard to hit (especially I + J). So I increased the hitArea by assigning it a rectangle that is much wider. On the PC in the Browser the enlarged hitArea works fine, but inside a webview inside an iOS or Android-App it doesn't seem to affect anything, I still have to tap the letters about 10 times until I hit it. Any idea where that problem comes from? It makes the game incredible annoying and pretty much unplayable. I also tried adding and resizing a physics body, no luck Example code from the Sprite creation: letter = this.game.make.bitmapText(0, 0, 'bitmapfont', letters, 170 * scale); letter.anchor.set(0.5); //this.guessButtons = this.game.add.sprite(200 * scale * (i - (line - 1) * charsPerLine) + 400 * scale, 1650 * scale + 170 * line * scale, letterTex); this.guessButtons = this.game.add.sprite(260 * scale * (i - (line - 1) * charsPerLine) + 130 * scale, 1650 * scale + 170 * line * scale, letter._glyphs[0].texture); this.guessButtons.hitArea = new Phaser.Rectangle(-100 * scale, -10 * scale, 280 * scale, 190 * scale); this.guessButtons.scale = new Phaser.Point(170/200 * scale, 170 / 200 * scale); this.guessButtons.name = "guessLetterButton_" + i; this.guessButtons.inputEnabled = !this.watchMode; this.guessButtons.events.onInputDown.add(this.selectLetter, this, 0, letters); this.guessButtons.tint = 0x404040;