jonForum

ok yes , thank , i maybe do mistake somewhere , because i do the screenshot after 30 second These good to know that all this is automatic, I'll investigate thank you.

hi guys, i noticed when i delete a objets, the easing still loaded in memory. What the best way to manage your api for a video game ? do i need to stock all instance in a buffer and batch destroys them ? Example here, all those objects not exist in my render, they was deleted, but keep existing in memory from your API. What best practice, recommendation for manage the garbage collector ? Did you have something native implemented yet? thanks

Hi guys, when call a easing, and pass 'undefined' to a property, it seem to be computed !! so if i try this moveTo(1,1200); the y semm invalid, but it set to undefined ! What the way to avoid compute a x or y in this case. ? moveTo(messageID,tX,tY){ if(this.lists[messageID]){ const data = this.lists[messageID]; TweenMax.to(data.cameraBoneXY, 1, { x: isFinite(tX)? tX-data.globalMessageXY.x : void 0, y: isFinite(tY)?-tY+data.globalMessageXY.y : void 0, ease: Elastic.easeOut.config(0.9, 0.4), }); TweenMax.to(data.cageTxt, 2, { x: isFinite(tX)? tX-data.globalMessageXY.x+70 : void 0, y: isFinite(tY)? tY-data.globalMessageXY.y-30 : void 0, ease: Elastic.easeOut.config(1, 0.2), }); }; }; thank you for help me understand this issue.

Also i have another question for you @Sahil or @GreenSock Did you know if is there a official or good un-official discord or slack community for greensock ?

after deep check ho yes it allowed , It because a was searching for the classic big paypal button haha ! if i remember , tweenMax block on nwjs and vsCode or if is just plugin ? am not remember. But now i see paypal, i will get it . thank for your time.

@Sahil Yes, you're right. The tweenLite approach is interesting and tweenMax is look much cleaner to work with. I intend to get it because for the moment I can not debug it in nwJs and vsCode, I need a license and i will get it when i will have time. thank you so much you are awesome and this will help me understand under the hood. ps: The only reason why i am still not have tweenMax is that greensock does not yet take paypal for transactions. My fund for the web are on paypal, but as soon as this possible, I will buy it.

Hi guys, i search some code example on this forum, but i found nothing that show a Pendulum effect with tweenLite or with TimelineLite? Someone would have a functional example to create a permanent pendulum effect? My target it to get something similar that spine2D allow. for help to understand, i just want replace spine by vanilla js and vanilla tweenLite feature, because i get more performance after my test with tweenLite. But am not sure how do a pendulum loop with tweenLite. If you can provide me demos or link to the docs it will be wonderful Maybe i just don't get the good keyword for search! sorry again for poor english, thank guys.

ho we can mark this thread solved ? a button or ?

awesome i will study this thank a lot

Hi guys, what the best way to toggle (disable and active) rendering before animation. i have issue here if you fast click on interaction. I need active rendering before show , and disable rendering after hide. But if i fast click, i get issue. hope i explained myself good. Thank for help

hum, thank i will take on look on this. I try made a codePen but i get error on load ressource ??? CodePen need special approach for load image ? this is my test to build the app , am stock on load texture. `We cannot complete this request, remote data could not be fetched` It work on my playground test. https://pixiplayground.com/#/edit/5GfBUnOWx5gkhcTi9PnTz but on playground, i can not load external .js thank

threw a little worried after following a debugging step with the break. if easing animation step i pass to ~~ 16ms to 23ms I am not able to isolate the culprit but I suspect that it a call to a new constructor somewhere in tweenLite. the easing frame update lost me 7 ms , pretty huge for a simple easing feature.

yes single box. that what i thinking , so the correct way is maybe replace this let list = []; this.pinners.forEach(slots => { list.push(slots.pinGem.scale) }); this.tweens.pinGemScale = new TweenLite(list, 0, { x:0.4, y:1, ease:Elastic.easeOut.config(1.2, 0.2), }); to this => let i = 0; this.pinners.forEach(slots => { this.tweens[`pinGemScale${i++}`] = new TweenLite(slots.pinGem.scale, 0, { x:0.4, y:1, ease:Elastic.easeOut.config(1.2, 0.2), }); }); is this the best performance ways? Because create many `new TweenLite` seem heavy

hi, how i can play individual target initialised ? example here, i setup a tween list. the var list contains a arrays list of target to initialize. _huds_pinBar.prototype.setupTweens = function() { // pinGem scaling let list = []; this.pinners.forEach(slots => { list.push(slots.pinGem.scale) }); this.tweens.pinGemScale = new TweenLite(list, 0, { x:0.4, y:1, ease:Elastic.easeOut.config(1.2, 0.2), }); }; _huds_pinBar.prototype.scalePinGem = function(x,y,duration) { if(duration){ const t = this.tweens.pinGemScale; t.vars.x = x; t.vars.y = y; t._duration = duration; t.invalidate(); // TODO: deep study how this work t.play(0); }else{ this.scale.set(x,y) }; }; After If i play with scalePinGem, it play all instance?! here what the scope give. So did i need to initialise individual class for each obj , instead of assign a list? but this will be a huge memory assignation. Sorry if i explain myself bad in english, but you can see what a mean upper, i need scales individually each gem but with one instance of tweens.

thank you for your answers friends. it would be really great to see a section like this. I think that does not require too much technical means. it is quite rare to see people asking for a paid service on a general forum of mutual assistance, it is rather to private or in a section specially look for this kind of request. yes it perfect It also very easy to setup a https://www.paypal.me/ It a fast service i used a lot. I know your maybe a lot busy, do you think you will create this feature soon ?

a little example i don't know if you can like it ? it only for a suggest

hey guy can you make a paid (jobs,Classifieds,hire... ?) section plz ? some similar example http://www.html5gamedevs.com/forum/22-jobs-hiring-and-freelance/ https://forums.rpgmakerweb.com/index.php?forums/classifieds-offers.78/ https://forums.rpgmakerweb.com/index.php?forums/classifieds-requests.79/ why,... i will maybe need help to make some complexe hack and not have time study all your api, but.. You have a lot of talented people, I think it would be a 'plus' to create a sections for commercial jobs . I do not say to take example here, but it will be nice to be able to spend cash for helping dev som complex scripting with your api. thank Idee is not about make your more money but about unleashing your software What do you think about this guys ?

humm, well i think it working now . I had to re-code my logic with a specific ticker for the mouse. and a also change some property your use by alpha,beta,delta,meta it more easy to understand for me. they are float pixi point . And the ticker perform compute those valur to set the pointer xy. This operation is only done once when the mouse ishovers a specific object. //$mouse.initialize() _mouse.prototype.initialize = function() { this.screenX = 1600, this.screenY = 900; this.icon = null; this.alpha = new PIXI.Point(0,0); // coor 1 this.beta = new PIXI.Point(0,0); // coor 2 this.moved = false; // mouse are moving indicator this.isDown = false; // mouse is down indicator this.tiker = this.create_tikers(); this.tiker.start(); this.sensiX = this.sensiY = 0.8; this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10 // check if started path selector this.tweenLastCase = null; this.startedPathCase = null; // easing mouse this.tween = new TweenLite(this.position, 0, { x:0, y:0, ease:Power4.easeOut, }); this.createSpriteMouse(); this.create_Listeners(); //this.debug(); // FIXME: REMOVE }; _mouse.prototype._mousemove = function(event){ // determine the direction this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0; this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0; this.alpha.x+=(event.movementX*this.sensiX); this.alpha.y+=(event.movementY*this.sensiY); this.inCase = $cases.onMouseMove(this.alpha.x,this.alpha.y, this.isDown); }; _mouse.prototype.create_tikers = function() { // Tikers for editor update (document Title, check scroll) return new PIXI.ticker.Ticker().add((delta) => { const metaX = (this.alpha.x/$camera.zoom.x)+$camera.position.x; // reel position (will compute zoom + camera..) const metaY = (this.alpha.y/$camera.zoom.y)+$camera.position.y; let deltaX,deltaY; // diff let ease = this.inCase && 0.2 || 0.8; if(this.inCase && this.focused !==this.inCase){ this.focused = this.inCase; this.alpha.x-=(metaX-this.inCase.x)/2; this.alpha.y-=(metaY-this.inCase.y)/2; }; this.beta.x += (this.alpha.x - this.beta.x) * ease; this.beta.y += (this.alpha.y - this.beta.y) * ease; this.tween.vars.x = this.beta.x; this.tween.vars.y = this.beta.y; this.tween.invalidate(); this.tween.play(0); // TODO: DELETE ME DEBUG ONLY document.title = ` alphaXY: [${~~this.alpha.x},${~~this.alpha.y}] || betaXY: [${~~this.beta.x},${~~this.beta.y}] || metaXY: [${~~metaX},${~~metaY}] || ` }); }; thanks @Sahil

maybe my approach is not good, these very confusing the css, my knowledge in css was from 10 years ago. I am not able to convert your approach, with my mouse engine grr. what is xPercent:? did you think it possible to use your code without a tick, only with onMousemove ? the code source am trying to path it look like this. but it very similar to the codepen. /*: // PLUGIN □────────────────────────────────□MOUSE INTERACTIVITY□───────────────────────────────┐ * @author □ Jonathan Lepage (dimisterjon),(jonforum) * @plugindesc MOUSE ENGINE * V.0.1a * License:© M.I.T └───────────────────────────────────────────────────────────────────────────────────────────────────┘ Controle tous ce qui est associer a la sourits, interaction avec player et camera engine Initialise avantr le loader , seulement pendant la sceneBOOT */ // ┌-----------------------------------------------------------------------------┐ // GLOBAL $mouse CLASS: _mouse //└------------------------------------------------------------------------------┘ function _mouse() { PIXI.Container.call(this); }; _mouse.prototype = Object.create(PIXI.Container.prototype); _mouse.prototype.constructor = _mouse; $mouse = new _mouse(); console.log9('$mouse: ', $mouse); //$mouse.initialize() _mouse.prototype.initialize = function() { this.icon = null; this.x = this.y = 0; // mouse coor this.sensiX = this.sensiY = 0.8; this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10 this.screenX = 1600; this.screenY = 900; this.mouseIsDown = false; // mosue is down indicator // check if started path selector this.tweenLastCase = null; this.startedPathCase = null; // easing mouse this.tween = new TweenLite(this.position, 0, { x:0, y:0, ease:Power4.easeOut, }); this.createSpriteMouse(); this.createListener(); //this.debug(); // FIXME: REMOVE }; //┌-----------------------------------------------------------------------------┐ // $mouse.createSpriteMouse(); // create the sprite spine mouse and default animations //└-----------------------------------------------------------------------------┘ _mouse.prototype.createSpriteMouse = function() { const sprite = new PIXI.Sprite.fromImage('/img/mouse.png'); sprite.anchor.set(0.5,0); this.icon = sprite; this.iconLight = new PIXI.lights.PointLight(0xffffff,0.5); // the sceen FX sun this.addChild(sprite,this.iconLight); }; //┌-----------------------------------------------------------------------------┐ // $mouse.initialise(); // initialise mouse grafivs and all listener //└-----------------------------------------------------------------------------┘ _mouse.prototype.createListener = function() { // mouse listener document.addEventListener('mousemove', this.mousemove_core.bind(this)); document.addEventListener('mousedown', this.mousedown_core.bind(this)); document.addEventListener('mouseup', this.mouseup_core.bind(this)); document.addEventListener('wheel', this.wheel_core.bind(this)); // frames window listener //document.body.onwebkitfullscreenchange = this.windowResized; // FIXME: F4 FULL SCREEN VOIR LA REQUETE FAITE PAR RMMV document.body.onresize = this.windowResized; document.body.onblur = this.windowBlur; document.body.onfocus = this.windowFocus; }; //┌-----------------------------------------------------------------------------┐ // event: windowResized, _mouseblur, _mousefocus // listener related to fullScreenManager and the API pointer lock //└-----------------------------------------------------------------------------┘ _mouse.prototype.windowResized = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; _mouse.prototype.windowBlur = function(event){ document.exitPointerLock(); }; _mouse.prototype.windowFocus = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; //┌-----------------------------------------------------------------------------┐ // event: _mousemousemove // event that compute the current mouse position and move the icon //└-----------------------------------------------------------------------------┘ _mouse.prototype.mousemove_core = function(event){ // determine the direction this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0; this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0; this.x+=(event.movementX*this.sensiX); this.y+=(event.movementY*this.sensiY); // overScreen reasigment position this.checkOverScreen(); // check camera !this.mouseIsDown && $camera.onMouseMove(this.x,this.y); // check cases const inCase = $cases.onMouseMove(this.x,this.y, this.mouseIsDown); if(inCase && this.tweenLastCase !== inCase){ this.tweenLastCase = inCase; this.moveToCase(inCase,0.5) } console.log('inCase: ', inCase); if(this.startedPathCase && this.mouseIsDown){ this.computePath(); } }; _mouse.prototype.checkOverScreen = function(){ if(this.x>this.screenX){ if(this.dirH === 4){ return this.x = this.screenX; }; }else if(this.x<0){ if(this.dirH === 6){ return this.x = 0; }; }else if(this.y>this.screenY){ if(this.dirV === 8){ return this.y = this.screenY; }; }else if(this.y<0){ if(this.dirV === 2){ return this.y = 0; }; }; }; // $camera.moveToTarget(); _mouse.prototype.moveToCase = function(inCase, speed,ease) { console.log1('inCase: ', inCase.getGlobalPosition()); const p = inCase.getGlobalPosition() this.tween.vars.x = p.x; this.tween.vars.y = p.y+(inCase.heigth/2); speed && (this.tween._duration = speed); this.tween.invalidate(); this.tween.play(0); console.log('this.tween: ', this.tween); }; _mouse.prototype.computePath = function(){ if($cases.current){ // if case not exist in array, add it if(this.startedPathCase.indexOf($cases.current)<0){ this.startedPathCase.push($cases.current); } } }; //┌-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //└-----------------------------------------------------------------------------┘ _mouse.prototype.mousedown_core = function(event){ this.mouseIsDown = true; if($cases.current){ this.startedPathCase = [$cases.current]; $cases.onMousedown(); } }; //┌-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //└-----------------------------------------------------------------------------┘ _mouse.prototype.mouseup_core = function(event){ this.mouseIsDown = false; if(this.startedPathCase){ $player.moveToCase(this.startedPathCase[this.startedPathCase.length-1]); this.startedPathCase = null; $camera.onMouseWheel(1); } }; //┌-----------------------------------------------------------------------------┐ // event: wheel_core // event when mouse whell //└-----------------------------------------------------------------------------┘ _mouse.prototype.wheel_core = function(event){ // allow to add what need, example if on element do other thing than zoom .. $camera.onMouseWheel(event.deltaY<0 && 0.2 || -0.2); }; //$mouse.debug(); // add debug feature mouse mouve //TODO: REMOVE ME _mouse.prototype.debug = function(){ var debugMouse = this._mousemousemove; // (dX: ${~~(mX/Zoom.x)+ScrollX} this._mousemousemove = function(event) { debugMouse.call(this,event); document.title = ` x: ${~~this.x} y: ${~~this.y} || mapX: ${ (this.x/$camera.zoom.x)+$camera.position.x } mapY: ${ (this.y/$camera.zoom.y)+$camera.position.y } || `; }; document.onmousemove = this._mousemousemove.bind(this); };

you are insane! thank a lot , i will study this in few hour ..

Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active the pointer lock, just click inside the blue square. if your move the mouse, your will see that the behavior is a little messy when the mouse flies over a white square. An idea on a good approach to create a similar system? thank a lot for help.

Would anyone know a method or algorithm in JS to calculate and detect if a mouse is moving by a circle around a target? Example if a rotate mouse *2 time around a specific XY point, i would like to re-center my camera obj. (in my context i need algoritme for a camera engine) I search i little bit on the web, but no found good formula to perform this. Maybe a will need a special api ? or a easy trick to do this with GSAP ? i take a try on this forum, i not find similar codepen project to do this. thank for suggest guys. in context, the target position are know, i need to find a way to check if the mouse do multiple circle rotation around this target XY, in a timelaspe (maybe 1000 or 2000 ms)

thank you, I think that for the moment I reached my objective, I still have some detail, but I am very close to what I want for the camera engine. All your answers helped me a lot. It still have to optimize, but I keep this for more later to avoid losing too much time on this module. But it works as I wish now. class _camera_{ constructor() { this.position = null; // the map pivot this.scale = null; // the map scale Zoom this.target = null; // player or event or point XY this.targetH = null; // need size of target because anchor are objsprite 0.5,1 this.tweenP = null; // tween position this.tweenZ = null; // tween Zoom this._tmpZoom = 1; // store the targeted zoom this._userZoom = 0; // when user use wheell for custom zoom }; // get the sceen center from resolution TODO: Dynamic resolution from user options get cX() { return 1600/2/this._tmpZoom }; get cY() { return 900/2/this._tmpZoom }; // comput reel target position (center Screen target) get targetX() { return this.target._x-this.cX }; get targetY() { return this.target._y-this.cY-this.targetH }; }; $$cam = new _camera_(); // when mouse was move check camera interaction _camera_.prototype.onMouseMove = function(x,y){ const ra = $$gamePlayer._zoneLimit; // player data allowed for zone limit const raX = x>1600 && ra || x<0 && -ra || NaN; const raY = y>900 && ra || y<0 && -ra || NaN; // player actived the limit const camX = this.tweenP.vars.x - this.targetX; const camY = this.tweenP.vars.y - this.targetY; const backH = 1600/3; // back value for horizon const backV = 900/3; // back value for horizon if(camX!==0){ if(camX>0&&!raX&&x<(1600/2)-backH){ return this.moveFromTarget( 0, NaN, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom ); }else if(camX<0&&!raX&&x>(1600/2)+backH){ return this.moveFromTarget( 0, NaN, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom ); } }; if(camY!==0){ if(camY>0&&!raY&&y<(900/2)-backV){ return this.moveFromTarget( NaN, 0, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom ); }else if(camY<0&&!raY&&y>(900/2)+backV){ return this.moveFromTarget( NaN, 0, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom ); } }; (raX || raY) && this.moveFromTarget( raX, raY, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom ); }; // $$cam.moveFromTarget(10,10,4); Move from target to new XY _camera_.prototype.moveFromTarget = function(x,y,speed,ease) { isFinite(x) && (this.tweenP.vars.x = this.targetX+x); isFinite(y) && (this.tweenP.vars.y = this.targetY+y); speed && (this.tweenP._duration = speed); this.tweenP.invalidate(); this.tweenP.play(0); };

@Carl thank a lot for your fast answer and all information. Just for sure i understand , sorry my english is a little rusty . The ShockinglyGreen licence give me a life license for all plugin + 1 year for update. After expiration , only if i need update , i can extend the subscription ? Am not commercial registered or multi users.

little question here. if a get a license , do the app need alway online ? Or the request are local ? Or do you share a build without license request ? Also, do you have some free key license for test feature on app node js ? How work you license for app ? In general I would like to avoid polluting my source code of unnecessary request. if i understand the licence is life licence, but only 1 year update . Same like license from texturepacker. https://www.codeandweb.com/texturepacker Edit: also where it the paypal button ? thank a lot for help me understand