Search the Community

hi, i'm new to Pixi.js . i really need help to proceed ... i created an animated character that can be animated by mousedown event , i want to do it on keydown too be it doesnt animate it only shows the first frame of the sprite. here is the page: http://kibghit.net/test/ JS script <script> // create a renderer instance. renderer = PIXI.autoDetectRenderer(800, 600); // Listen for mouse events on canvas renderer.view.addEventListener("mousedown", mouseDownHandler, true); renderer.view.addEventListener("mousemove", mouseDownHandler, true); renderer.view.addEventListener("mouseup", mouseUpHandler, true); window.addEventListener("keydown", checkKeyPressed, true); // add the renderer view element to the DOM document.body.appendChild(renderer.view); // create an new instance of a pixi stage var stage = new PIXI.Stage(0xAAAAAA); var texture = PIXI.Texture.fromImage("assets/bondif-sprite.png").baseTexture; var xsize = 184; var ysize = 325; var allDirections = []; var tempTexture; var currentAnimation; var isMouseDown = false; for (var i = 0; i < 2; i++) { var animationTextures = []; for (var j = 0; j < 8; j++) { tempTexture = new PIXI.Texture(texture, {x:j*xsize, y: i*ysize, width:xsize, height:ysize}); PIXI.TextureCache[(i*2)+j] = tempTexture; animationTextures.push(tempTexture); }; var oneWayAnimation = new PIXI.MovieClip(animationTextures); oneWayAnimation.stop(); oneWayAnimation.visible = false; if (i == 1) { oneWayAnimation.stop(); oneWayAnimation.visible = true; currentAnimation = oneWayAnimation; } oneWayAnimation.position.x = 400-40; oneWayAnimation.position.y = 300-40; stage.addChild(oneWayAnimation); allDirections.push(oneWayAnimation); console.log(allDirections); }; // start animating requestAnimFrame( animate ); var framesPerSecond = 12; var msPerFrame = 1000 / framesPerSecond; var walkCycleFrameCount = 8; var dirIndex = 1; function animate() { var animationAgeInMs = new Date().getTime(); if (isMouseDown) currentAnimation.gotoAndStop((Math.floor(animationAgeInMs / msPerFrame) % walkCycleFrameCount)); renderer.render(stage); requestAnimFrame( animate ); } function checkKeyPressed(e) { console.log(e.keyCode); if (e.keyCode == "39") dirIndex = 1; // looking down else if (e.keyCode == "37") dirIndex = 2; // bottom left currentAnimation.stop(); currentAnimation.visible = false; currentAnimation=allDirections[dirIndex-1]; currentAnimation.visible = true; e.preventDefault(); } function mouseDownHandler(e) { if (e.type == "mousedown") isMouseDown = true; if (!isMouseDown) return; var x = e.offsetX==undefined?e.layerX:e.offsetX; var y = e.offsetY==undefined?e.layerY:e.offsetY; var angle = Math.atan2((x - currentAnimation.position.x - 40) , (y - currentAnimation.position.y - 40)); console.log("delta["+angle+"]: " + (x - currentAnimation.position.x - 40) + "/" + (y - currentAnimation.position.y - 40)); if (angle < 0.4 && angle > -0.4) dirIndex = 1; // looking down else if (angle < -0.4 && angle > -1.2) dirIndex = 2; // bottom left else if (angle < -1.2 && angle > -2.0) dirIndex = 2; // left else if (angle < -2.0 && angle > -2.8) dirIndex = 2; // top left else if ((angle < -2.8 && angle > -3.2) || (angle < 3.2 && angle > 2.8)) dirIndex = 1; // up else if (angle < 2.8 && angle > 2.0) dirIndex = 1; // right top else if (angle < 2.0 && angle > 1.2) dirIndex = 1; // right else if (angle < 1.2 && angle > 0.4) dirIndex = 1; // right bottom currentAnimation.stop(); currentAnimation.visible = false; currentAnimation = allDirections[dirIndex-1]; currentAnimation.visible = true; e.preventDefault(); } function mouseUpHandler(e) { isMouseDown = false; e.preventDefault(); } </script>

Hello, I am relatively new to both JS and Phaser so bare with me. I have run into a problem with animating an object from one point to another and then wait for a mouse click and then move back to the original position. So I am trying to create a chain of tweens and also adding an eventlistener in the middle to wait for a mouseclick before continuing the tween chain. And through this chain I need to pass the object (card) that I am doing animations on. The problem at the moment is that I want to send a parameter with the eventlistener from clickCallback to clickWait. function clickCallback(currentCard) { this.addEventListener("click", clickWait(currentCard), false); } function clickWait(cur) {//Here is the problem, I can get the eventlistener or the argument, not both.. removeEventListener("click", clickWait); //... } function clickCallback(currentCard) { this.addEventListener("click", clickWait, false); } function clickWait(e) {//Same as above but I get the event removeEventListener("click", clickWait); //... } I did a ugly solution earlier which worked, but it was not practical. I also recently found out how functions that you add with onComplete/onStart send arguments which made me think I could solve it in another fashion. Is there anyway to solve this, or do I have to stick with my ugly solution? Full code below (at least the relevant stuff): function moveCard(card, tutoBox) { var tempGroup = card.parent; var tempPositions = [{x:card.position.x,y:card.position.y},{x:card.paired.position.x,y:card.paired.position.y}]; var cards = []; cards.push(card); cards.push(card.paired); var tweenList = createCardTweens(card,tutoBox.position,30,90); for(var i = 0; i < tweenList.length; i++) { tweenList[i].onStart.add(scaleCard, this); tweenList[i].start(); objGroup.addChild(cards[i]);//Moves the selected card infront of tutoBox tweenList[i].onComplete.add(clickCallback, this); } function scaleCard(currentCard){ var scaleCard = game.add.tween(currentCard.scale); if (currentCard.scale.x === 1.125 || currentCard.scale.y === 1.125) scaleCard.to({x: 0.7, y: 0.7}, 450, Phaser.Easing.Linear.None); else scaleCard.to({x: 1.125, y: 1.125}, 450, Phaser.Easing.Linear.None); scaleCard.start(); } function clickCallback() { addEventListener("click", clickWait, false); } function clickWait(e) { removeEventListener("click", clickWait); for (var i = 0; i < cards.length; i++) { var cardMoveBack = game.add.tween(cards[i]); cardMoveBack.to(tempPositions[i], 500, Phaser.Easing.Linear.None); cardMoveBack.start(); } cardMoveBack.onStart.add(scaleCard,this); cardMoveBack.onComplete.add(function(currentCard){ tempGroup.addChild(currentCard); cardsManager.enableClickAll(); tutoBox.destroy(); },this); } }

I have a problem. when I press the button, the animation doesn't loop.please help my. var createScene = function () { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene); BABYLON.SceneLoader.ImportMesh("Cube", "scenes/", "x.babylon", scene, function (newMeshes) { scene.stopAnimation(newMeshes[0]); // On push on a touch...window.addEventListener('keydown',function(event){ if (event.keyCode == 65){ scene.beginAnimation(newMeshes[0], 40, 60, true); } }); // On push off a touch...window.addEventListener('keyup',function(event){if (event.keyCode == 65){ scene.stopAnimation(newMeshes[0]);}); }); return scene;}