fighter_zzh_使用CSS动画和JavaScript构建Street Fighter演示

悠悠 2023-02-22 01:27 9阅读 0赞

fighter\_zzh

I recently learned a [cool technique from Simurai][] about how to animate PNG sprites with the CSS3 animations' `steps()` property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite.

我最近[从Simurai][cool technique from Simurai]学到了一项[很酷的技术，内容][cool technique from Simurai]涉及如何使用CSS3动画的`steps()`属性为PNG精灵设置动画。 此技术的主要思想是“重新创建”某种动画GIF，但要带有PNG子画面的图块。

As with everyone I know, I played to Street Fighter in my childhood and when I saw [this][] ... guess what popped in my head?

就像我认识的每个人一样，我从小就在《街头霸王》中玩过，当我看到[这件事时][this] ……我脑子里突然冒出了什么？

Check out this Pen!

*If the pen doesn't render above, [click here][] to see it in action.*

*如果笔未在上方渲染， [请单击此处][click here]查看其动作。*

### 让我们创建第一个CSS动作 **(**Let's Create the First CSS Move**)** ###

We'll start with the punch (see in the sprite bellow it's the third one). First we need to open Photoshop to create the sprite. Make all images the same size (these ones are 70px width and 80px height). There is a good app called [Texture Packer][] which can help in creation of game sprites. Try to find the dimensions of the biggest of your frames and use these dimensions for your grid. At the end you'll get something like this:

我们将从打Kong开始(请参见下面的精灵，这是第三个)。 首先，我们需要打开Photoshop来创建精灵。 使所有图像大小相同(这些图像的宽度为70px，高度为80px)。 有一个名为[Texture Packer][]的好应用程序，可以帮助创建游戏精灵。 尝试找到最大的框架尺寸，并将这些尺寸用于网格。 最后，您将获得以下内容：

[![ken][]][ken 1]

Then we need to set up a `DIV` for Ken which will receive our punch move (and all our other future moves):

然后，我们需要为Ken设置`DIV` ，该`DIV`将收到我们的打卡动作(以及所有其他以后的动作)：

/* html */
    <div class="ken"></div>
    /* css */
    .ken { 
        width:70px; height:80px; /* exactly the size of an image in our sprite */
        background-image:url('../images/sprite.png'); 
    }

Let's assume vendor prefixes are implicitly working. Now we can declare the punch animation like this:

假设供应商前缀隐式工作。 现在我们可以这样声明穿Kong动画：

/* css */
    .punch { 
        animation: punch steps(4) 0.15s infinite; 
    }
    @keyframes punch {
        from { background-position:0px -160px; }
        to { background-position:-280px -160px; }
    }

What we just did is apply an animation (punch) to a class name (`.punch`) which basically animates `background-position` from `0px` to `-280px` (on x axis). This animation will be broken into 4 parts (steps(4) which corresponds to the punch's 4 images), and it will take 0.15 second to perform; then it will start over infinitely.

我们刚才所做的是将动画(打Kong)应用于类名( `.punch` )，该类名基本上将`background-position`从`0px`为`-280px` (在x轴上)。 此动画将分为4个部分(对应于打Kong器的4张图像的步骤(4))，并且需要0.15秒的时间来执行； 那么它将无限地重新开始。

Finally we need a way to add/remove the `.punch` class name on `DIV.ken` when another key is pressed.

最后，我们需要一种在按下另一个键时在`DIV.ken`上添加/删除`.punch`类名称的方法。

/* javascript */
    $(document).on('keydown', function(e) {
        if (e.keyCode === 68) { // 68 is the letter D on the keyboard
            $('.ken').addClass('punch');
            setTimeout(function() { $ken.removeClass('punch'); }, 150);
        }
    });

We used jQuery to `addClass('punch')` if the letter "D" is pressed and then remove it after a setTimeout (a delay) of 150ms (remember our css animation takes exactly 0.15s wich is the same as 150ms). That's pretty much all you need to know to create a lot more moves.

如果按下字母“ D”，则使用jQuery来`addClass('punch')` ，然后在150ms的setTimeout(延迟)后将其删除(请记住，我们CSS动画需要0.15s的时间与150ms相同)。 这就是创建更多动作所需的全部知识。

### 使用SASS将其提升到一个新的水平 **(**Take it to the Next Level with SASS**)** ###

If you pay attention to what we are doing, you'll notice we have some values that never change (width/height of an image in the sprite), and, after you've created some other moves, you'll notice you have a lot of code duplication which will be difficult to read and maintain in the future. [SASS][] can help us [DRY][] all this mess!

如果您注意我们正在做的事情，您会发现我们有一些永远不变的值(子画面中图像的宽度/高度)，并且在创建了其他动作之后，您会注意到很多代码重复，将来将很难阅读和维护。 [SASS][]可以帮助我们[干燥][DRY]所有这些混乱！

First we need basic `@mixins` like `animation()` and `keyframes()`:

首先，我们需要基本的`@mixins`例如`animation()`和`keyframes()` ：

@mixin animation($params) { 
        -webkit-animation:$params;
        -moz-animation:$params;
        -ms-animation:$params;
        animation:$params;
    }
    @mixin keyframes($name) { 
        @-webkit-keyframes $name { @content }
        @-moz-keyframes    $name { @content }
        @-ms-keyframes     $name { @content }
        @keyframes         $name { @content }
    }

We need to store image width / height values and SASS variables exist for this reason:

为此，我们需要存储图像的宽度/高度值和SASS变量：

$spriteWidth:70px;
    $spriteHeight:80px;

And finally we can mix those together to create a complicated new mixin which will declare moves and handle correct calculation of background positions for us:

最后，我们可以将它们混合在一起以创建一个复杂的新mixin，它将声明动作并为我们处理正确的背景位置计算：

@mixin anim($animName, $steps, $animNbr, $animParams){
        .#{$animName} { 
            @content;
            @include animation($animName steps($steps) $animParams); 
        }
        @include keyframes($animName) {
            from { background-position:0px (-$spriteHeight * ($animNbr - 1)); }
            to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }
        }
    }

Now you can create a new move with a single line of code:

现在，您可以使用一行代码来创建新动作：

$spriteWidth:70px;
    $spriteHeight:80px;
    
    /* punch */
    @include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);
    /* kick */
    @include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);
    /* hadoken */
    @include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);
    ...

`$animNbr` is very important: the calculation is based on this number. In fact it's just the moves count in the sprite. Our first example was the punch, right? And in our sprite it's the move number 3. The kick is number 7, etc.

`$animNbr`非常重要：根据此数字进行计算。 实际上，这只是精灵中的动作计数。 我们的第一个例子是一拳，对吗？ 在我们的子画面中，它是移动数字3。踢是数字7，依此类推。

### 为火球添加碰撞检测 **(**Add Collision Detection for the Fireball**)** ###

We need a very fast loop for collision detection. It will test the fireball position (offset) every 50 milliseconds, compare it to something else position (here we test the end of the screen). If the fireball's left position is bigger than the window width, then it means the fireball overtaken the screen so we immediately apply an `.explode` class.

我们需要一个非常快速的循环来进行碰撞检测。 它将每隔50毫秒测试一次火球位置(偏移)，并将其与其他位置进行比较(此处我们测试屏幕的末端)。 如果火球的左侧位置大于窗口宽度，则表示火球超过了屏幕，因此我们立即应用`.explode`类。

Here's how I did it; it's not perfect but it works very well:

这是我的做法； 它并不完美，但效果很好：

### 下一步是什么？ **(**What's Next?**)** ###

We could easily add some sound effects, background music, sprite another character, mix this up with [web RTC][] to allow multiple computers to control characters (I don't know something with [NodeJS][] and [Socket.io][] or maybe the cool new [Meteor framework][]); that's what I love with web development: it's almost limitless.

我们可以很容易地添加一些声音效果，背景音乐，雪碧另一个字符，这混合了[网络RTC][web RTC] ，允许多台计算机控制字符(我不知道的东西[的NodeJS][NodeJS]和[Socket.io][]也许很酷的新[流星框架][Meteor framework] ); 这就是我对Web开发的热爱：它几乎是无限的。

> 翻译自: [https://davidwalsh.name/street-fighter][https_davidwalsh.name_street-fighter]

fighter\_zzh

[cool technique from Simurai]: http://simurai.com/post/37075268994/steps-animation
[this]: http://www.spriters-resource.com/snes/supersf2/sheet/5556
[click here]: http://codepen.io/jkneb/pen/smtHA
[Texture Packer]: http://www.codeandweb.com/texturepacker
[ken]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9rZW4ucG5n?x-oss-process=image/format,png
[ken 1]: https://davidwalsh.name/demo/ken.png
[SASS]: http://sass-lang.com/
[DRY]: http://en.wikipedia.org/wiki/Don'%20rel=
[web RTC]: http://www.w3.org/2011/04/webrtc/
[NodeJS]: http://nodejs.org/
[Socket.io]: http://socket.io/
[Meteor framework]: http://meteor.com/
[https_davidwalsh.name_street-fighter]: https://davidwalsh.name/street-fighter