いんわんの投稿 - Crieit

CSSで文字をアニメーションさせる方法

2022-04-03T12:30:16+09:00

文字をアニメーションさせて目立たせるやり方です。

見出しに使ったりワンポイントに使ったりいろいろできると思います。

この記事では以下のpタグの文字をアニメーションさせていきます。

あいうえお

文字の色を変える

まずは簡単な色を変えるアニメーションです。

#text {
    animation: color-loop 1s infinite;
}
@keyframes color-loop {
    0% {
        color: red;
    }
    50% {
        color: blue;
    }
    100% {
        color: red;
    }
}

「animation: color-loop 1s infinite」はcolor-loopを1秒間で繰り返し(infinite)行うという意味です。

@keyframesは時間のどの割合の時に何を変更するかを指定します。赤から50％で青になり100％で赤に戻るという内容です。

もちろんこの割合をもっと細かく設定したり色の数を増やしたりできます。

文字を拡大縮小させる

#text {
    display: inline-block;
    animation: scale-loop 1s infinite;;
}
@keyframes scale-loop {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(2, 2);
    }
    100% {
        transform: scale(1, 1);
    }
}

scale()で拡大縮小をさせることができます。拡大縮小したい倍率を指定すればOKです。(X方向、Y方向)になっています。

一つ注意なのが「display: inline-block」を指定しておく必要があることです。これが無いと変化する幅が文字列の幅より大きくなってしまいX軸方向で大きくずれてしまいます。

文字を回転させる

#text {
    display: inline-block;
    animation: rotate-loop 1s infinite linear;
}
@keyframes rotate-loop {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

linearは変化を等間隔で変化するようにする指定です。

scaleは度(degree)で指定します。マイナスの値にすると反対に回ります。

一文字ずつずらしてアニメーションさせる

最後に文字列を一文字ずつずらしてアニメーションさせてみます。

まずはCSSはこんな感じです。

#text {
    /*今回は無しです*/
}
#text span {
    display: inline-block;
    animation: scale-loop 1s infinite linear;
}
#text span:nth-child(2) {
    animation-delay: 0.1s;
}
#text span:nth-child(3) {
    animation-delay: 0.2s;
}
#text span:nth-child(4) {
    animation-delay: 0.3s;
}
#text span:nth-child(5) {
    animation-delay: 0.4s;
}

span:nth-child(n)は文字の数だけ用意しておきます。今回は5文字なので5までしか作っていません(１は遅らせる必要が無いのでありません)。

animation-delayはアニメーションを遅らせたい時間です。

次にjavascript。

window.addEventListener("load", function(){
    textAnimation();
});
function textAnimation(){
    var elm = document.getElementById("text");
    var text = elm.innerHTML;
    for(let i = 0; i < text.length; i++){
        html += "" + text[i] + ""
    }
    elm.innerHTML = html;
}

id=textの文字を取得して文字を分割してspanタグで挟んでいます。

これで一文字ずつ指定した時間分遅れてアニメーションします。

javascriptだけでやってみた

上のサンプルのjavascriptを改造してcssを減らして楽にできるようにしてみました。

window.addEventListener("load", function(){
    textAnimation("text", 0.1);
});
function textAnimation(id, delayTime){
    var elm = document.getElementById(id);
    if(!elm)return;
    var text = elm.innerHTML;
    elm.innerHTML = "";
    for(let i = 0; i < text.length; i++){
        const span = document.createElement('span');
        const node = document.createTextNode(text[i]);
        span.appendChild(node);
        span.style.animationDelay = delayTime * i + 's';
        elm.appendChild(span);
    }
}

これならCSSの「span:nth-child(n)」の部分をわざわざ記述する必要が無くなってとても楽ちんです。

引数でidと時間の間隔も指定できるようにしたので使い勝手もかなり良くなりました。

もうちょっと派手にしてみた

最後に色も追加して派手に目立つようにしました。

See the Pen 文字アニメーション by いんわん (@inwan78) on CodePen.

ブラウザゲームの操作入力を一括管理するインプットマネージャーを作る

2021-08-01T21:54:06+09:00

ブラウザゲームを作るときにゲームを操作できるものがたくさんあります。キーボード、マウス、ゲームパッド、そしてスマホのタッチ入力。これらからの入力を一括して管理できればめちゃくちゃ楽で便利ですよね。

というわけでこれらの操作入力を一括管理をしてくれる便利なinputManagerクラスを作りたいと思います。

あ、一括管理と言いましたけどスマホやマウスのただのタッチ入力は関係ありません。これは個別で必要に応じて作ればいいです。まとめて管理するのはキーボード、ゲームパッド、そしてスマホのバーチャルキーパッドの入力です。

けっこう長いプログラムになるので面倒ですが一回作れば今後のゲーム開発がクッソ楽になるので頑張ってつくりましょう(‘ω’)ノ

ちなみに開発環境はpixi.js + Typescritptですが今回はpixi.jsは関係ないです。javascriptでもゲームパッド以外はできると思います(ゲームパッドはnpmで入れてるのでjsなら要自作。他はenchant.jsでも同じもの作ってました)。他の言語については全く分かりませんがどうやってるかってのは参考になるかなと思います(‘ω’)

ゲーム操作に必要な定数を作る

ではまず先に入力の判断に使う定数を作ります。

方向入力の定数

方向入力の定数を作ります。方向入力は8方向で作ります。

で、まず8方向のうちの4方向、上下左右を4桁の2進数で考えるようにします。0000が何も押されていない状態です。で
- 0001 上
- 0010 右
- 0100 下
- 1000 左

と考えてください。こうすると上と右が押されると3になります。左上が押されると9になります。こんな感じで8方向の定数を作ると

public keyDirections = {
  UP: 1,
  UP_RIGHT: 3,
  RIGHT: 2,
  DOWN_RIGHT: 6,
  DOWN: 4,
  DOWN_LEFT: 12,
  LEFT: 8,
  UP_LEFT: 9,
}

となります。

キーボードではいくつも同時にキーが押せるため変な数字になることがありますが入力判定処理時にこの定数以外の場合は無視すればOKです。

ボタンの状態管理用定数

キーボードやゲームパッドのボタンは単純に押した離しただけではなくて、正確にゲームでコントロールしようと思うと「今押した」「押しっぱなし」「今離した」「押してない」という4つの状態が必要になります。

なのでその定数を作っておきます。

public keyStatus = {
  HOLD: 2,
  DOWN: 1,
  UNDOWN: 0,
  RELEASE: -1,
}

ボタンの状態管理用変数

次はボタンの状態を入れておく変数を作ります。

で、この状態を管理する変数ですが1つのボタンについて2つ作ります。これはボタンが「今押した」のか「押されっぱなし」なのかという状態を知るために前の状態を残しておくためです。一つ前の状態が押されているかどうか分かれば今押された(離した)のかどうかが分かります。

public input = {
  //入力されたキーのチェック用
  keys: {
    Up: false,
    Right: false,
    Down: false,
    Left: false,
    A: false,
    B: false,
    Start: false
  },
  //一つ前のキーの状態管理用
  keysPrev: {
    Up: false,
    Right: false,
    Down: false,
    Left: false,
    A: false,
    B: false,
    Start: false
  }
}

私は方向入力以外はAボタン、Bボタン、スタートボタンしか作ってないですがもっと欲しい人は追加してください。

キーボード入力イベントを作る

キーボードの入力イベントを作ります。

なんかkeyCodeが非推奨みたいですがそんなの気にしない(^^;)気になる方は修正してください。押されたキーをtrueに、離したらfalseにしてます。

document.addEventListener('keydown', (e) => {
  switch(e.keyCode){
    case 87://w
      this.input.keys.Up = true;
      break;
    //以下同様に他のボタンも作る
  }
});
document.addEventListener('keyup', (e) => {
  switch(e.keyCode){
    case 87://w
      this.input.keys.Up = false;
      break;
    //以下同様に他のボタンも作る
  }
});

キーの入力をチェックする関数

入力方向を調べる関数

押されている方向キーの数字を合算して返します。単純に足してるだけです。

 public checkDirection() {
  let direction = 0;
  if(this.input.keys.Up){
      direction += this.keyDirections.UP;
  }
  if(this.input.keys.Right){
    direction += this.keyDirections.RIGHT;
  }
  if(this.input.keys.Down){
    direction += this.keyDirections.DOWN;
  }
  if(this.input.keys.Left){
    direction += this.keyDirections.LEFT;
  }
  return direction;
}

入力状態の取得

現在のキーの状態を取得します。引数は状態管理用変数に使っているボタンの名前(UpとかAとかStart)を入れて使います。これで返ってくる値が現在のボタンの状態です。

またこれを使うのは毎フレーム1回だけです。ここでkeyPrev(前回の状態)を書き換えているので2回以上使うとおかしくなります。必要な場合は戻り値を保存して使ってください。

public checkButton(key: string) {
  if(this.input.keys[key]){
    if(this.input.keysPrev[key] == false){
      this.input.keysPrev[key] = true;
      return this.keyStatus.DOWN;//押されたとき
    }
    return this.keyStatus.HOLD;//押しっぱなし
  }else{
    if(this.input.keysPrev[key] == true){
      this.input.keysPrev[key] = false;
      return this.keyStatus.RELEASE;//ボタンを離した時
    }
    return this.keyStatus.UNDOWN;//押されていない
  }
}

上の2つの処理がミソ

このinputManagerの一番のポイントはゲームの入力をチェックする際にキーボードだろうがゲームパッドだろうがバーチャルパッドだろうが上の2つの処理から入力をチェックできることです。これができるようにするためにボタンの状態管理用変数を作っているわけです。

inputManagerの役目はゲームのプログラムを書くときに入力デバイスのことを考える必要がないようにすることです。

ゲームパッドの入力について

ゲームパッドの入力については先にこちらの記事を読んでください(‘ω’)ノ
ブラウザゲームでもコントローラーで操作できるようにする！

で、ゲームパッドの入力判定してるところで

if(this.gamepad.button('dpad down')){
  this.input.keys.Down = true;
}else{
  this.input.keys.Down = false;
}

て感じで状態管理用フラグを変えてやればOKです。楽勝だね(*‘∀‘)

バーチャルゲームパッドの入力について

バーチャルゲームパッドについてはこちらの記事を先に読んでください(‘ω’)ノ
バーチャルパッドの作り方

で、もうわかると思いますがこれも同様に入力判定してるところで状態管理用フラグを変えてやればOKです。

class Btn {
  constructor(key: string){
    this.addEventListener("touchstart", () => {
      InputManager.input.keys[key] = true;
    });
    this.addEventListener("touchend", () => {
      InputManager.input.keys[key] = false;
    });
  }
}

クラスの内容は省略してますがこんな感じです。

おしまい

以上な感じで私はInputManagerというクラスを作って入力を管理しております。これで入力デバイスを意識することなくゲームを作っていくことができます。
ちなみにこのInputManagerを使ってるゲームがこちらです(‘ω’)ノ
トイレへの道