botmaster

Members
  • Content Count

    93
  • Joined

  • Last visited

1 Follower

About botmaster

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. botmaster

    No TouchEvents Error

    Good catch, that was the problem (ontouchstart). Just had to make sure it stayed undefined, this wasn't a problem before I updated to PIXI 4.8.0 and that completely slipped through the testing.
  2. botmaster

    No TouchEvents Error

    I don't think jsfiddle would help as this is not related directly to code but instead to browser support. Here is the situation on all the computer in my company (around 50 MACs/100 PCs): WIN10 17134.228 MAC High Sierra 10.13.6 NO touchscreen. (of course this problem DOES NOT apply to mobile or touchscreen device) IE 11.228.17134.0 : 'TouchEvent' is undefined (PIXI 4.8.0 causes an error) , PointerEvent: ok, MouseEvent: ok EDGE 42.17134.0: TouchEvent: ok, PointerEvent: ok, MouseEvent: ok Chrome 69.0.34497.100: TouchEvent: ok, PointerEvent: ok, MouseEvent: ok FireFox 62.0.2 : 'TouchEvent' is undefined (PIXI 8.2.0 causes an error) , PointerEvent: ok, MouseEvent: ok Safari 12.0 (13606.2.11) : 'TouchEvent' is undefined (PIXI 4.8.0 causes an error) , PointerEvent is undefined (This is handled by PIXI but when there's no TouchEvent there's no HOVER insteraction) , MouseEvent: ok 1. The original PIXI code (4.8.0) does assume the existence of TouchEvent definition but that definition is not present in many cases which causes error, which in turn causes interaction to completely stop working. 2. My temporary fix does handle the error and this restores interaction for IE and FireFox but NOT for Safari where both TocuhEvent and PointerEvent don't exist. So my next fix (since the one I posted does not work in safari) will handle TouchEvent check the SAME WAY PIXI does handle PionterEvent check but will have to add the case where BOTH don't exist.
  3. botmaster

    No TouchEvents Error

    Bumping this since that does seem quite a huge bug in PIXI and yet nobody is responding. Again: On a computer with NO TOUCHSCREEN, on some browsers, PIXI generates a nasty TouchEvent error and NO user interaction can happen after that. The fix I posted is working for most browsers except Safari where no hover event are working. Would be nice if someone would break the silence on this.
  4. botmaster

    No TouchEvents Error

    There's a few "ugly" override I have to make with pixi and this just adds another one. Yep I use a try/catch so my code can recover and move on then I just use the boolean. Without this this pixi code will fail and no interaction will occur at all on: - desktop - no touchscreen - with safari, firefox, edge, IE - only chrome manages to provide a touchevent. PIXI.interaction.InteractionManager.prototype['normalizeToPointerData'] = function normalizeToPointerData(event:any) { var normalizedEvents = []; var hastouchevent = true; try { new TouchEvent("", null) } catch(e) { hastouchevent = false; } if (hastouchevent) { for (var i = 0, li = event.changedTouches.length; i < li; i++) { var touch:any = event.changedTouches[i]; if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; if (typeof touch.isPrimary === 'undefined') { touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; if (typeof touch.tiltY === 'undefined') touch.tiltY = 0; if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; touch.twist = 0; touch.tangentialPressure = 0; // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven // support, and the fill ins are not quite the same // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; // mark the touch as normalized, just so that we know we did it touch.isNormalized = true; normalizedEvents.push(touch); } } // apparently PointerEvent subclasses MouseEvent, so yay else if (event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof window['PointerEvent']))) { var mouseevent:any = event if (typeof mouseevent.isPrimary === 'undefined') mouseevent.isPrimary = true; if (typeof mouseevent.width === 'undefined') mouseevent.width = 1; if (typeof mouseevent.height === 'undefined') mouseevent.height = 1; if (typeof mouseevent.tiltX === 'undefined') mouseevent.tiltX = 0; if (typeof mouseevent.tiltY === 'undefined') mouseevent.tiltY = 0; if (typeof mouseevent.pointerType === 'undefined') mouseevent.pointerType = 'mouse'; if (typeof mouseevent.pointerId === 'undefined') mouseevent.pointerId = 1; if (typeof mouseevent.pressure === 'undefined') mouseevent.pressure = 0.5; mouseevent.twist = 0; mouseevent.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it mouseevent.isNormalized = true; normalizedEvents.push(event); } else { normalizedEvents.push(event); } return normalizedEvents; };
  5. botmaster

    No TouchEvents Error

    This code throws error: ReferenceError: "TouchEvent is not defined" in PIXI 4.8.0 And then no pointer events are working. This happens in Edge, FireFox, Safari with no touchscreen Apparently supportsTouchEvents passes even though no TouchEvent definition is present. InteractionManager.prototype.normalizeToPointerData = function normalizeToPointerData(event) { var normalizedEvents = []; if (this.supportsTouchEvents && event instanceof TouchEvent) { for (var i = 0, li = event.changedTouches.length; i < li; i++) { var touch = event.changedTouches[i]; if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; if (typeof touch.isPrimary === 'undefined') { touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; if (typeof touch.tiltY === 'undefined') touch.tiltY = 0; if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; touch.twist = 0; touch.tangentialPressure = 0; // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven // support, and the fill ins are not quite the same // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; // mark the touch as normalized, just so that we know we did it touch.isNormalized = true; normalizedEvents.push(touch); } } Any workarounds? Or is it fixed in newest version?
  6. botmaster

    PIXI current versions in the future ?

    The event system among other things, it's completely different in 4.8.+ than 4.1.0. This is the kind of change that usually require a 4 to change to 5 .... It completely skips the npm package system that is built on that idea that all major change must increment the major version value. I made it works ultimately by doing some very deep fix in my code base and cross my fingers ....
  7. botmaster

    PIXI current versions in the future ?

    Risk is big in my experience, I built an entire framework around PIXI 4.1.something and when later tried to update to PIXI 4.5.something (I think it was 5) all hell broke loose. This was a huge disappointment to me, I was expecting PIXI 5 to do that eventually but not while still in version 4. I did evaluate the changes and found they were deep and numerous to the point that my framework would have to be completely rewritten. problem is I already have a bunch of apps in production and I can't throw so much testing time down the toilet and start over. So I'll stick to 4.1 for now and make the updates myself and as for PIXI 5 I might have later to adapt it to my framework and not the other way around. It's really a trend that I think Apple started with all frameworks nowadays, why being backward compatible when you can simply just not care about it at all.
  8. botmaster

    [Question] Trigger sprite events manually

    Keep in mind that "fake" interaction events do not have credentials and cannot be used in replacement of true user interaction. For example, on Ios the WebAudioAPI can only be activated upon a true user interaction event, faking such event will have no effect.
  9. botmaster

    Delta time is ruining my animations

    That type of displaying is often referenced as 'flatten' where all contained objects must be shader compatible and will all be rendered in one draw call. The code I showed was a pseudo code of course and the 'value' can refer to any numeric amount like the total number of frames of an animation or the total number of pixels to move an object by, or an angle, ect ... Frame based animation or motion gives you no control on how long/fast it will take for the animation or motion to complete. A 60 frames animation at 60fps in theory will complete in 1 second but due to framrate fluctuations it's going to be + or - 1 seconds. Even worse if the fps drops to 45 or 30 then your animation will take even longer to complete. Same for motion, adding +5 to the x property of an object to move it across the screen at each frame/update at 60fps doesn't guaranty the object would have moved 300px in 1 second, it might be close if framerate is consistent or very off if framrate is not. In time based animation you calculate by how much the initial value must increase based on how much time has passed since last update. For the motion example, the goal is to move by 300px in second which is (300/1000) = 0.3px per millisecond. With each update/tick you calculate how much time (in milliseconds) has passed since last update then you apply: var passedTime = currentTime - lastTime (in milliseconds, currentTime is the recorder time at this update, lastTime is the recorder time at last update) var valuepermillisecond = (300/1000) < this really should be dynamic and not hard coded values myobject.x += passedTime * valuepermillisecond // we move our object according to the time that has passed. In this case the object will have moved 300px in one second regardless of framerate. Now when dealing with frame animation the idea is the same but you must of course roundup the numbers since in time based you only deal with float. In that case that would be: var valuepermillisecond = (total number of frames/1000) myobject.gotoAndStop(Math.floor(valuepermillisecond))
  10. botmaster

    Delta time is ruining my animations

    I haven't used animatedSprite yet personally but it seems to have everything you need to run your animation on time based. Making everything time based is fairly simple but note that when you get very low FPS (and I mean global FPS here) then your time based animation will become shoppy, still accurate but shoppy. Also most if not all tween engines are time based. basic idea is: value / T (miliseconds) = total value per miliseconds myibject.x = (value / T) * currentT (in this case currentT is how much time has passed since the animation started but this can be adjusted from the last update as well)
  11. botmaster

    Delta time is ruining my animations

    I totally understand, what you want is what's called "time based" animation and PIXI doesn't provide that but in fairness most low level frameworks/technologies don't, they provide you with a tick and let you handle the rest. Flash or SriteKit work the same way for example. The smoothy.js I guess is meant to provide that time based feature so go with it. To further answer your question: - PIXI correctly doesn't provide any time based feature with its tick system - that tick system/delta doesn't control the framerate as you said since framerate cannot really be controlled - the delta value tells you how much time has passed since the last tick, this is what can be used to run a time based system (and this is what smoothie.js uses) - the real framerate is really how many requestanimationframe can be called per second, while you can lower the number of call by code you certainly cannot increase it so that's really the framerate basis, time based animation doesn't alter the framerate, it calculates what frame an animation should display based on how much time has passed, how many pixels an object should move based on how much time has passed, etc ...
  12. botmaster

    Coordinates

    Just create a second container on top fo the gameboard, make it mirror position and scale then add to it your graphic and start your animation. Once the animation is over you can even as easily put the graphic back in gameboard. Use containers they make your life much easier.
  13. botmaster

    Delta time is ruining my animations

    There's not really anything special going on here, the delta value you get is about the same you'll get with the smoothie library. You don't have to use the ticker anyway and you can just stop it and provide your own routine.
  14. botmaster

    [Help] How to set color for each vertice of mesh

    You'll need a custom shader for that I'm pretty sure.
  15. botmaster

    [help] How Tweening work

    Tweening takes: 1. a measure of time, 2. an object. 3. one (or more) property (usually numeric) of that object, 4. an end value for that property. The tween then starts and run for the amount of time defined and apply a math formula each time it is called that includes: the actual time T, the start value of the property, the end value of the property and calculate the intermediate value that needs to be applied to the object. Most tween engine are time based but not all. Tweening is usually best used for defined animation where the end value doesn't change although most engine allow you to change on the fly the end values and tween properties to make them dynamic. Is it suitable for slow machine animation? yes it is > define the number of time and end angle the slot must spin > calculate the amount of time this requires > now you have all the values needed for a tween. The difference here is you must calculate everything before using a tween to animate a slot. What tweens are not suitable for usually: tweening an object that interacts (eg. bounce, hit other objects, ect) with other objects What tweens are good for: tweening an object to defined end values (that will not change or change very little), eg. train going from point A to point B. alpha going from 0 to 1, ect ...