![]() The bottom one uses shadowBlur on the canvas path, and the top one has no shadow blur. To create the glow effect, I drew two segments on top of each other. In drawComboGui first we clear the canvas from any previous data drawn onto it before drawing the current state. Like I mentioned earlier, the render function then calls drawComboGui on each requestAnimationFrame, ideally 60 times a second. On each requestAnimationFrame you make a draw call to the canvas to draw the state of the UI based on those objects. These values specify how the UI looks at any given point in time. The basic idea is that you use GSAP to change the properties of these objects over time. It enables you to animate pretty much anything! The trick is that the animation API accepts not only DOM/SVG objects but also arbitrary JS data structures, whose properties you can then “animate”. Luckily GSAP (aka Greensock AKA TweenMax AKA TweenLite) allows me to do just that. This means that performance was nothing if not paramount, and I wanted to know exactly which code powers the animation. In addition, all of the animations had to run smoothly on top of playing video, on both desktop and mobile with varying capabilities and network conditions. This is because I needed to use several types of animations in the project: Canvas, SVG and CSS/DOM, and no one framework does it all. I was debating whether to use a canvas animation framework but ultimately decided against it. So far so good - but where’s the animation? Then I iterate over an array of segment objects and use their properties ( strokeStyle, lineWidth) to draw the actual segments with the canvas arc function. I defined a general options defined with some properties to play with later on like the number of segments, radius, width and so on. The gauge segments is where things get interesting. The image is the easy part, it’s just a trivial use of canvas’ drawImage. See the Pen Pistons Superpower: Structure by Opher Vishnia ( on CodePen.Įssentially, there are two main components here - the central image and the gauge segments. The basic structure of the Superpower is achieved with one Canvas element and a bit of simple geometry: At certain times in the game, the Superpower Gauge becomes active, notifying the user they can click it to make their in-game avatar perform a special move. The gauge sits at the top left corner of the screen, and its task is to convey to the user the amount of their combo points as denoted by the number of red segments. In 1on1, once the user succeeds making a move, they’re awarded combo points. This is the motion reference I used while implementing the animation, created in After Effects: In this article, I want to focus and show you how I implemented the animation for the Superpower Gauge using vanilla JS in conjunction with GSAP. ![]() It’s really amazing what we can do with just a browser these days. While developing the game I used many neat things like canvas, SVG and CSS animations, gesture recognition and a video stream that’s dynamically constructed on the fly. Throwing balls around is one thing throwing pixels around - now that’s finally a basketball challenge I can ace! Now a tall and gangly developer, still bad at basketball, I was faced with a project: Designing and implementing a full motion video web basketball game for the NBA’s Detroit Pistons. Eventually, I realized, much to the dismay of aunts and other cheek-pinchers alike, that while occupying vertical real estate might give you an advantage in the art of basketball, it does not ensure it.įast forward 21 years later. So I practiced and practiced spending hours on the court of my elementary school. I was a gangly ten-year-old, and like any other relatively tall kid I was often addressed to by “you must be so good at basketball!”. The year was 1995 Toy Story hit the theaters, kids were obsessively collecting little cardboard circles and Kiss From a Rose was being badly sung by everyone.
0 Comments
Leave a Reply. |