[css] パックマンのキャラアニメーション#1 キャラクター作成

2023年4月12日

CSS

eyecatch HTMLの仕様だけでパックマンを作ってみようかと考えてみたので、まずはメインキャラクターをcssのみで構築してみようと思います。

ソースコード

packman.html

<link rel='stylesheet' href='pacman.css' /> <style>body{background-color:black;}</style> <div class='pacman'></div>

packman.css

.pacman{ --size-chara : 80px; position:absolute; top:100px; left:100px; width:var(--size-chara); height:var(--size-chara); } .pacman::before, .pacman::after{ content:''; display:block; width:100%; height:50%; background-color:yellow; animation-duration:0.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .pacman::before{ transform-origin:center bottom; border-radius:var(--size-chara) var(--size-chara) 0 0; transform:rotate(45deg); animation-name : pacman_before; } .pacman::after{ transform-origin:center top; border-radius:0 0 var(--size-chara) var(--size-chara); transform:rotate(-45deg); animation-name : pacman_after; } @keyframes pacman_before{ 0%{ transform:rotate(45deg); } 50%{ transform:rotate(0deg); } 100%{ transform:rotate(45deg); } } @keyframes pacman_after{ 0%{ transform:rotate(-45deg); } 50%{ transform:rotate(0deg); } 100%{ transform:rotate(-45deg); } }

デモ

解説

簡単な用に見えて、ちょっとだけテクニックが必要です。 基本的には、半円2つを上下のシンメトリ状態にかぶせて、中心を軸に回転アニメをしています。 cssだけで半円を描くには、border-radiusの上下どちらか半分の値を0にすることでできちゃうんですね。 そして、それぞれのパーツの中心点を、transform-originで整えて上げます。 それをkeyframeアニメーションを使って、rotateを適用しています。 この時に、上下で反対の動きをするので、どうしても同じアニメーションを適用できませんでした。 transformが後でセットする値が前述を上書きしてしまうので、filterのflip機能を独立化させてもらいたいですね。

あとがき

Doodleにブラウザで手軽に遊べるパックマンがありますが、これはcanvasを使っている安定版です。 これを見ると、口の開きが少し奥まっているのが分かりますが、見た目悪くはないので、とりあえずこのまま行ってみたいと思います。 簡単そうに見えて意外と作ってみると奥が深そうだな〜〜。

知財

パックマンは、バンダイナムコ社の登録商標です。 PAC-MAN™ & ©1980 BANDAI NAMCO Entertainment Inc.

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。