1枚の画像をトリムしながらフレームアニメーションさせる。はてなブログでjQueryを使って表示。

キャラ設定と、イメージ伝えるのにキャラジェネレーターでそれっぽいのを作ろうと思って、今丁度欲しいマップ上で表示させるミニキャラのものを触ってました。

ちびキャラツクール / ファミ通.com 無料ゲーム
 Loose Leafキャラクター素材合成シミュレータ

いやー、マップチップは自由に使えることが多いんですが、キャラチップは大体、RPGツクールで配布されてるものをベースに作ってます。
なのでRPGツクールでしか使用不可です。っていうものがほとんどなんですよね(´・ω・｀)

一応、完全オリジナルのキャラチップもありはするんですが、本当にゲーム！って感じのいかにもなものがほとんど。
私が今作りたいものは学園日常ものなので学生服とかセーラー服とかそういうので薄めのキャラが欲しいんです。

友人絵師のあめちぇるさんに、メインキャラのドット絵もおなしゃす！と無茶ぶりしてるので、きっと何とかなるはず！
学園ものなので、大体他のモブもボディは同じになるはずで。
モブなんてクオリティどうでもいいやっ！のっぺらぼうでもいいくらいだぜ！ってノリです。
だったら、いっその事全部お願いしよう(^q^)

キャラジェネレーターのこと伝えて、同じような感じのレイヤー分けしてもらっておけば、キャラジェネレーターも自作できる！
ゆくゆくはゲーム内で主人公のキャラメイキングとかにも使える気がする！と+（0ﾟ・∀・） + ﾜｸﾃｶ +

そういや、大体の配布サイトでキャラチップってそのままpngベターって感じで、動いた時の感じがつかめないんですよね。サンプルでいくつかアニメgif載せてくれる人もいたりしますが。

別にアニメgif作らなくてもcssとjsで範囲絞って映す位置ずらせばいいだけでは？と作ってみた。
うん、これでアニメーション確認したりとかすぐ出来る( ･`д･´)

・・・。

どうせ作ったんだから動く形でブログに載せたい・・・。
スタイルはいけるだろうけど、jQueryいけんねやろうか・・・。
生のJavaScriptはあんま分からんからなぁ・・・。

調べたところ出来ることが分かった！！

へー、はてなブログってjQuery使えんねや(；・∀・)知らんかった！

<a href="http://blog-box.hateblo.jp/entry/2013/11/26/011339">はてなブログにjQueryのスクロールでtopへ戻るボタンを導入するソース - BLOG-BOX</a>blog-box.hateblo.jp

見つけたサイトで、「あっ、これいいよね」と思ったのでそのまま練習がてらパクるｗ

ｫｵｰ!!(ﾟдﾟ屮)屮できた。

じゃあ、ほんとにやりたかったことをやるよ！

前置きが長いっ( ﾟдﾟ )ｸﾜｯ!!

ものすごいステキな絵でよく無料ランキング上位のアプリとかでもよく見かける
キャラクターチップ素材|ＲＰＧツクール素材支部|臼井の会様の素材を拝借

アニメーションgif使ってないよ！ほんとだよ(；・∀・)

真ん中下段の子すごく好き(^q^)死んでるのピクピクするのかと思ってたけど違うかったｗ

左上はイカちゃんじゃないでゲソ。気のせいでゲソ。

いやードット絵アニメーションっていいですよね！
早く自分の作ったキャラを動かしてあげたい。ちゃんと設定作ろう！

一応中身

html

<div class="chara_tip_frame">
    <!-- dataはオプション -->
    <img class="chara_tip_trim" data-line="1" data-frame_sequence="[1,2,3]" src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/image/$Actor64_b_3.png">
</div>

js

$(function() {
    // 設定値
    var width = 32;
    var height = 32;
    var default_frame_sequence = [1,2,3,2];
    var default_line = 1;
    var frame_interval = 200;
    var frame = 0;
    // 次のフレームに切り替える
    function nextFrame() {
        frame++;
        $('.chara_tip_trim').each(function() {
            var line = $(this).data("line") || default_line;
            var frame_sequence = $(this).data("frame_sequence") || default_frame_sequence;
            var now_frame = frame_sequence[frame % frame_sequence.length];
            var top = height * (line - 1);
            var left = width * (now_frame - 1);
            var right = left + width;
            var bottom = top + height;
            $(this).css({
                'top' : - top  + 'px',
                'left': - left + 'px',
                'clip':'rect('+
                    top + 'px,' +
                    right + 'px,' +
                    bottom + 'px,' +
                    left + 'px' +
                ')'
            });
        });
    }
    // 無駄に走らないように
    if ($('.chara_tip_trim').length) {
        var frame_interval = setInterval(function() {
            nextFrame();
        }, frame_interval);
    }
});

css

.chara_tip_frame {
    position: relative;
    width: 32px;
    height: 32px;
}
.chara_tip_frame .chara_tip_trim {
    position: absolute;
    clip: rect(0px, 32px, 32px, 0px);
}

一応全体のもの

<a href="https://github.com/yasuhiro-matsuda/WebSample/commit/66b6cb5cf0f97d191705432fc2e740bac682bdf9">キャラチップをトリムしつつ、アニメーション表示させるサンプル作成 · yasuhiro-matsuda/WebSample@66b6cb5</a>github.com

この時、配列で渡したかったデータが配列になってなかったので修正してます(´・ω・｀)

久しぶりにWeb系のコード書いた。新鮮ｗ

以下でちょっと賢くなった

いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
 TEST CORDING » GithubからJavaScriptを読み込み時は専用のドメインから！

あとはてなブログのデザインCSSがよく分からない。

/*
この書き方できない
<link rel="stylesheet" href="css/scroll_top.css">
*/
/*
これも設定画面は適用されるけどメイン画面で読み込まれない
@import "http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/chara_tip_animation.css";
@import "http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/scroll_top.css";
*/

普通にスタイルはかけたけど外部ファイルうまく読み込めなかった。
なのでヘッダーとかから、外部ファイル読み込みました(´・ω・｀)ちゃんちゃん

<!-- ヘッダー -->
<link rel="stylesheet" href="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/chara_tip_animation.css">
<link rel="stylesheet" href="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/scroll_top.css">
<!-- フッター -->
<a class="scroll_top" href="#">
  <img src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/image/icon_up_arrow.png" alt="topへ戻る" />
</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/js/chara_tip_animation.js"></script>
<script src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/js/scroll_top.js"></script>