Search the Community

Hello everybody! I'm new to this site and am quite new to HTML5 game development as a whole. I have watched a few tutorials here and there, and came here in search of help from somebody with more experience than myself to help with my current issue. Currently I am working on a game to run alongside my website (connected to the game in a way). I have gotten a player object that tweens to the position a player clicks on within the canvas to work, but it seems only to work with one person connected only, otherwise the most recently connected player has all control to the position of said player object rather then creating one for themselves. I have tried a couple things (first being to include the image position within the socket.on function) but that only caused the player to be positioned where they clicked without any tweening being done. Here's the code for the client: var socket = io(); var ctx1 = document.getElementById("ctx"); var ctx = document.getElementById("ctx").getContext("2d"); img = new Image(); img.src = "FrontpageGuy.png"; img.xpo = 250; img.ypo = 250; socket.on('newPos',function(data){ ctx.clearRect(0,0,1024,576); for(var i = 0 ; i < data.length; i++){ TweenMax.to(img, 1 ,{ xpo:data[i].x, ypo:data[i].y, repeat:0, }); ctx.drawImage(img, img.xpo, img.ypo); } }); function clickDetector(event) { var xVal = event.clientX; var yVal = event.clientY; console.log("click X:" + xVal + ", click Y:" + yVal); socket.emit('movePlayer', {x:xVal, y:yVal}); } ctx1.addEventListener('click', clickDetector, false);

I have following tween I used to move an image in my game coords = { x: 0, y: 0 }; tween = new TWEEN.Tween(coords) .to({ x: 700, y: 200 }, 2000) .onUpdate(function() { cardImg.position.set(coords.x, coords.y); }) .onComplete(function(){ redoTween(); }) .start(); function redoTween() { cardImg.position.set(0, 0); tween._valuesStart = { x: 0, y: 0 }; tween._valuesEnd= { x: 700, y: 0 }; tween.start(); } This works as expected. I wanted to re-use the same tween to move the image to a different location. I would like to update "coords" to new location and; call say; tween.start(); Is there a way to do this? What I noticed was I can only use the it once. https://jsfiddle.net/wijesijp/85xavjrs/30/

I am developing a game in which i have to click an image .after click it will flip and show prize after that i have to move this image and prize towards prize-board.during this movement i have to scale these images to fit into prize-board slot .how to solve this problem. please help

I want to do the same animation for bending card but unable to do so using css and border-radius property. Is there any property or method by which we can make it happen.. Plz help me regarding it.. card folding (1).mp4

i am not able to control the css properties for animation using Tweenjs , finding difficulty in adding it. Suggest how could i achieve it. I want to control border radius css property of css.

Hi, I manage to figure out how to tween a button's alpha from 1 to 0.5, using tweenjs. Now I can't seem to get it to jump to a certain location after the alpha is 0.5: this.coverBtn.addEventListener("click", coverBtnfadeOutClick.bind(this)); function coverBtnfadeOutClick() { createjs.Tween.get(this.coverBtn) .to({ alpha: 0.5 }, 100, createjs.Ease.none); if (this.coverBtn.alpha == 0.5) { this.coverBtn.x += 100; } } I usually just use onEnterFrame for AS2 in Flash era. How do I do that for html5?

Anyone know how to define a repeat count for a tweenJS tween (using easeJs framework) ? The only option I can currently find is {loop:true} which causes infinite looping. //my code var solidsAnim = createjs.Tween.get(icon,{loop:true}) .to({y:solidOriginalY - 50}, 600 ,createjs.Ease.SineIn) Thanks !

Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( https://github.com/tweenjs/tween.js/ ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.