Search the Community
Showing results for tags 'drop'.
Found 9 results
-
Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
-
hi everyone, Here is the problem I meet, I have a sprite and I can drag it in the right way when game has normal scale but when I change scale by game.world.scale.setTo(2); things become different. the sprite moving distance become twice as my cursor moving distance, when the scale becomes 3 the distance also become triple as well. so do you gays have any good ideas for sync cursor and sprite position, many thx.
-
Hi everyone. I'm attempting to make a train simulator which includes working controls (brake lever, throttle leaver, switches, horn controls....I'm sure you get the idea). With switches I decided I could just toggle them on picking with the actions manager. The levers, however, provide me with more of a challenge. As they revolve on a pivot I thought of using an (invisible) imposter mesh for the user input and setting the rotation of the lever meshes to correspond with the imposters x, y or z position, meaning the user's input will "move" the lever, so added the drag and drop code from the playground demo. It works in principle. A bit messy maybe - especially as I also need to figure out how best to accurately 'reset' the imposter to the levers handle position on the pick up event to be best placed for the next use. My question (finally) is, "is there a way to apply drag drop input to only the imposter mesh(es), rather than having desks, windows, instuments etc etc moving around the scene (as highly amusing as that is)?" Thanks everyone. I'll include a couple of screenshots to give a little context. In short, I want the levers to be movable (rotatable) by the 'driver'. Mark.
-
Hello, I'd like to add water drops on the camera lens as an effect. How can it be done? Moving drops would be nice, but static is more than enough This screenshot should explain my goal RiptideGP: http://prnt.sc/byopvq Thanks for every answer, Simon
-
Hi, I'm developing my first web game and I have small problem. Uncaught TypeError: this.constrainBackground is not a function .... on line 50 I dont know what I'm doing wrong. Any ideas? Thx (This is about that the user can drag/drop background image only from left to right in the window (fix size window).
-
Right, I'm new. Hello! This might help someone. It's an example of drag and drop, collision detection and physics (a drag puzzle game). I sketched it pretty quickly, and I'm sorry it's not commented. Bit messy but you should be able to grab the helpful bits. I had a nightmare putting this together to be honest, but on the 5th evening this is the result, so I'm pleased. I'll update it soon to make things clearer. SHARE YOURS! <html xmlns="http://www.w3.org/1999/xhtml"><head> <script src="hand.js"></script> <script type="text/javascript" src="cannon.js"></script> <script src="babylon.js"></script> <script src="jquery.min.js"></script> <script type="text/javascript" src="oimo.js"></script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } .debugDiv{ display:nones; } </style> </head> <body> <div class="debugDiv"></div> <canvas id="renderCanvas"></canvas> <script> var boxes = new Array(); var materials = new Array(); var box1, box2, blueBox, camera, scene, ground; var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var mazeSize = 3; var createScene = function(){ scene = new BABYLON.Scene(engine); var canvas = engine.getRenderingCanvas(); var startingPoint; var currentMesh; var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 5, 0), scene); camera.setPosition(new BABYLON.Vector3(200,150, 10)); scene.clearColor = new BABYLON.Color3(0, 0, 0); camera.attachControl(canvas, true); scene.enablePhysics(new BABYLON.Vector3(0, -500, 0), new BABYLON.OimoJSPlugin()); ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false); ground.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:0, friction:0.5, restitution: 1}); ground.visibility = 0; createWalls(); createBoxes(); var getGroundPosition = function(){ var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh){return mesh == ground;}); if(pickinfo.hit){return pickinfo.pickedPoint;} return null; } var onPointerDown = function (evt) { if (evt.button !== 0){return;} var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function(mesh){ return mesh !== ground;}); if(pickInfo.hit){ currentMesh = pickInfo.pickedMesh; startingPoint = getGroundPosition(evt); if(startingPoint){setTimeout(function(){camera.detachControl(canvas);}, 0);} } } var onPointerUp = function(){if(startingPoint){camera.attachControl(canvas, true); startingPoint = null; return;}} var onPointerMove = function(evt){ if(!startingPoint){return;} var current = getGroundPosition(evt); if(!current){return;} var diff = current.subtract(startingPoint); if(currentMesh.draggable){return;} currentMesh.moveWithCollisions(diff); startingPoint = current; currentMesh.updatePhysicsBodyPosition(); } $(canvas).bind("pointerdown", onPointerDown).bind("pointerup", onPointerUp).bind("pointermove", onPointerMove); scene.onDispose = function(){$(canvas).unbind("pointerdown", onPointerDown).bind("pointerup", onPointerUp).bind("pointermove", onPointerMove);} return scene; }; function createBoxes(){ matUnit = (1/mazeSize); blocks = new Array(); for(x=0;x<mazeSize;x++){ for(y=0;y<3;y++){ //materials materialsIndex = materials.length; materials[materialsIndex] = new BABYLON.StandardMaterial("texture1", scene); var m = materials[materialsIndex]; m.id = materialsIndex; m.diffuseTexture = new BABYLON.Texture("profilePic.jpg", scene); m.diffuseTexture.uScale = 1/mazeSize; m.diffuseTexture.vScale = 1/mazeSize; m.diffuseTexture.uOffset = matUnit*(-(x+1)); m.diffuseTexture.vOffset = matUnit*(0+y); boxIndex = boxes.length; boxes.push(BABYLON.Mesh.CreateBox("red", 49.9, scene)); var b = boxes[boxIndex]; b.id = materialsIndex; b.position.y = 25.1; b.position.x = 50-(50*y); b.position.z = 50-(50*x); b.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:0.1, friction:0.1, restitution:0.1}); b.checkCollisions = true; b.ellipsoid = new BABYLON.Vector3(24, 24, 24); coords = [Math.round(b.position.x),Math.round(b.position.z)]; m.coords = coords; b.coords = coords; if(x == mazeSize-1 && y == mazeSize-2){ coords = [Math.round(b.position.x),Math.round(b.position.z)]; m.coords = coords; b.coords = coords; break; } } } swapArrayElements(boxes, 5, 7); swapArrayElements(boxes, 4, 7); //swapArrayElements(boxes, 3, 7); //shuffle(boxes); for(x=0;x<materials.length;x++){boxes[x].material = materials[x];} } function createWalls(){ wallScaleAxis = new Array("x","z","x","z"); wallDimsArr = new Array([25*mazeSize, 25, 0],[0,25,25*mazeSize],[0-(25*mazeSize),25,0],[0,25,0-(25*mazeSize)]); wallsArr = new Array(); lightsArr = new Array(); for(x=0;x<4;x++){ lightsArr[x] = new BABYLON.PointLight("omni", new BABYLON.Vector3(wallDimsArr[x][0]*2, 150, wallDimsArr[x][2]*2), scene); lightsArr[x].intensity = 0.3; wallsArr[x] = BABYLON.Mesh.CreateBox("ground", 50*mazeSize, scene); var w = wallsArr[x]; w.scaling[wallScaleAxis[x]] = 0.001; w.scaling.y = 0.5; w.position = new BABYLON.Vector3(wallDimsArr[x][0], wallDimsArr[x][1], wallDimsArr[x][2]); w.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:0}); w.checkCollisions = true; w.draggable = true; w.ellipsoid = new BABYLON.Vector3(25*mazeSize, 25, 0.01); w.showBoundingBox = false; w.visibility = 0; } } var scene = createScene(); engine.runRenderLoop(function(){scene.render();}); $(window).bind("resize", function(){engine.resize();}); function swapArrayElements(arr, indexA, indexB){ var temp = arr[indexA]; arr[indexA] = arr[indexB]; arr[indexB] = temp; return arr; }; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } doer = 0; function showBoxPos(){ doer++; $(".debugDiv").html(doer) correct = 1; for(x=0;x<boxes.length;x++){ boxes[x].coords = [Math.round(boxes[x].position.x),Math.round(boxes[x].position.z)]; if(!(boxes[x].coords.toString() == materials[x].coords.toString())){correct++; break;}; } for(x=0;x<4;x++){ if(correct <= 1){ for(y=0;y<boxes.length;y++){ boxes[y].setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:-10}); boxes[y].updatePhysicsBodyPosition(); boxes[y].draggable = true; } clearTimeout(boxTimer); ground.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:1, friction:0.5, restitution: 1}); break; } } } var boxTimer = setInterval(showBoxPos, 1) </script> </body> </html>
-
Hello, I just discovered phaser. For my first test project I wanted to create some kind of 2d chess game. To make it simple, for my first task i decided to display board and a pawn. And assign to this pawn moving rules. As you all probably know pawns move forward by 1 tile and on their first move they may advance by 2 squares. I managed to display sprites representing board and a pawn. I've enabled dragging to pawn sprite and I'm stuck. Now in my application you can drag the pawn and drop it anywhere, even outside the board. I need any advice/hint how can I force the pawn to go back to previous position if the user drop it on wrong square. I didn't found any examples on this forum or on the front page, how can I achieve that. Can you help a little?
-
I can't get the DropShadowFilter to work with my images. Is this the correct way to do it? var shadow = new PIXI.filters.DropShadowFilter();shadow.color = 0x0000;shadow.distance = 5;shadow.alpha = 0.55;shadow.angle = 45;shadow.blur = 5;Spr = new PIXI.Sprite(PIXI.loader.resources.Sheet1.textures['button.png']);Spr.filters = [shadow];Only the sprite is shown -no filter attached though. Using Firefox 40.0.3, Win7, WebGLRenderer.
-
Hi guys! In Phaser Can I create targets for draggable objects? For example: http://jqueryui.com/droppable/#revert PD: that drop the item if it is above the other object or otherwise return Thanks in advance, Nicholls
