トップページ

このブログについて

全記事一覧(新着順)

テーマ別記事案内

短期間ゲーム制作講座


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

キャラクターの立ち絵を表示してまばたきアニメーションをさせる方法

20141109.png


いろいろ中途半端で申し訳ないですが、
なにぶんすぐ色んな事柄に興味がいってしまう性質なもので……


今回はまばたきのアニメーションをする方法をまとめたので
興味のある方、よろしければご覧ください。

※JavaScript+tmlibを使用しますが、関数やらの概念は
どの言語でも同じだと思うので問題ないと思います
吉里吉里とかRPGツクールでも同じ考え方でできるはず……多分(未検証です)


↓こんなものができます(▶ボタンを押して開始です)




おしながき

 ①立ち絵を用意する
 ②パーツをプログラムで読み込む
 ③目元の画像を切り替えてアニメーションさせる


①と②&③は絵とプログラムでジャンルが違うので
不得意な方には辛いかもしれないですが……頑張ってください!


①立ち絵を用意する


基本的な立ち絵の描き方から知りたい方は、以前書いた記事の

 SAIでゲームに使う立ち絵の作り方!自己流講座

を見ていただけるとよろしいかと思います。(宣伝)


そしてこのとき気をつけることは、最終的にpngなどで保存するとき
ベース部分と目は別の画像として保存すること
もしくはパターンごとに画像を保存することです。

こちらの画像をご覧ください。
さゆき sayuki_base.png sayuki_eye_normal.png sayuki_tail.png

のっぺら娘参上!
左から立ち絵完成品(実際には使いません)、ベース画像、目(通常)、あほ毛です。
省略していますが眉毛と口も別パーツに分けています。
あほ毛は趣味ですので分けなくても、というかそもそもなくて問題ありません。

あとまばたきには目(半目)、目(閉じ)が必要です。

20141109_1.png 20141109_2.png

描き方は……言えた立場じゃないので恐縮ですが。
まぶたは落ちてくるものなので目の下の部分はそのままに目玉部分を減らしたら
それっぽくなるのでは、と思います。

最悪中間は一瞬しか表示されないので縦幅縮小でもそれっぽくなる!……かもしれないです。


今回のやり方だと処理を簡単にするため完成状態から
各パーツのサイズを変更せず全身そのままのサイズで保存して下さい。
位置もずれないようにしてください。



②パーツをプログラムで読み込む


それぞれのパーツを別々に読み込みます。
言語によりますがレイヤーなりオブジェクトなりを分けて下さい。

●tmlibの場合●

tmlibの基本が知りたい方は超初心者さん向け短期制作ゲームカテゴリの<下準備編>となっている
記事を読んでいただければと思います。(宣伝その2)
tmlibでの画像表示の基本は【tmlib.js】画像を表示する!を見ていただければと思います。(宣でry)

※↑のサンプルプログラムのフォークマークからコードを全部見ることができますが、
ここでは不要なことを省略しているため違いがあります。

//********************************************************
//*
//*    <main.js>
//*
//********************************************************
//定数の定義
var SCREEN_WIDTH  = 640;
var SCREEN_HEIGHT = 640;

var CHARACTER_WIDTH  = 500;
var CHARACTER_HEIGHT = 1020;
var CHARACTER_X = SCREEN_WIDTH-CHARACTER_WIDTH/2;

//画像
var ASSETS = {
    "base"       :  "ベース画像のパス",
    "eye_normal" :  "目(通常)画像のパス",
    "eye_half"   :  "目(半目)画像のパス",
    "eye_close"  :  "目(閉じ目)画像のパス"
};

//main
tm.main(function() {
    var app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    
    app.fitWindow();
    app.background = "#000000"; 

    var loadingScene = tm.app.LoadingScene({
        assets: ASSETS,
        nextScene: GameScene,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT
    });
    app.replaceScene(loadingScene);
    app.run();
});

//GameScene
tm.define("GameScene", {
    superClass: "tm.app.Scene",
 
    init: function() {
        this.superInit();    
        //キャラクター画像
        var imgCharaCenter = tm.display.Sprite("base", CHARACTER_WIDTH, CHARACTER_HEIGHT).addChildTo(this);
        imgCharaCenter.position.set(CHARACTER_X, CHARACTER_HEIGHT/2 );
        var imgCharaCenterEye = tm.display.Sprite("eye_normal", imgCharaCenter.width, imgCharaCenter.height).addChildTo(this);
        imgCharaCenterEye.position.set(imgCharaCenter.x, imgCharaCenter.y );
    }     
});




②目元の画像を切り替えてアニメーションさせる


画像が読み込めたらあとは目パーツの画像をそれっぽいタイミングで
通常→半目→閉じ目→通常……と切り替えるだけです。

個人的な趣味で一回パチッとするのを繰り返すだけでなく、
たまに連続で(短い間隔で)まばたきするようにしています。

今回は
 通常状態(1000ミリ秒~10000ミリ秒でランダム)
 ※11分の1の確率で10ミリ秒~500ミリ秒でランダムに
  ↓
 半目状態(10ミリ秒~200ミリ秒でランダム)
  ↓
 閉じ目状態(10ミリ秒~200ミリ秒でランダム)

こんな仕様になっています。


●tmlibの場合●
※52~80行までを追加
//********************************************************
//*
//*    <main.js>
//*
//********************************************************
//定数の定義
var SCREEN_WIDTH  = 640;
var SCREEN_HEIGHT = 640;

var CHARACTER_WIDTH  = 500;
var CHARACTER_HEIGHT = 1020;
var CHARACTER_X = SCREEN_WIDTH-CHARACTER_WIDTH/2;

//画像
var ASSETS = {
    "base"       :  "ベース画像のパス",
    "eye_normal" :  "目(通常)画像のパス",
    "eye_half"   :  "目(半目)画像のパス",
    "eye_close"  :  "目(閉じ目)画像のパス"
};

//main
tm.main(function() {
    var app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    
    app.fitWindow();
    app.background = "#000000"; 

    var loadingScene = tm.app.LoadingScene({
        assets: ASSETS,
        nextScene: GameScene,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT
    });
    app.replaceScene(loadingScene);
    app.run();
});

//GameScene
tm.define("GameScene", {
    superClass: "tm.app.Scene",
 
    init: function() {
        this.superInit();    
        //キャラクター画像
        var imgCharaCenter = tm.display.Sprite("base", CHARACTER_WIDTH, CHARACTER_HEIGHT).addChildTo(this);
        imgCharaCenter.position.set(CHARACTER_X, CHARACTER_HEIGHT/2 );
        var imgCharaCenterEye = tm.display.Sprite("eye_normal", imgCharaCenter.width, imgCharaCenter.height).addChildTo(this);
        imgCharaCenterEye.position.set(imgCharaCenter.x, imgCharaCenter.y );

        eyeHalf(imgCharaCenterEye);

        function eyeHalf(img) {
            var time1;
            var time2;
            if( tm.util.Random.randint( 0, 10 ) ) {
                time1 = 1000;
                time2 = 10000;
            }else{
                time1 = 10;
                time2 = 500;
            }
            setTimeout(function() {
                img.image = "seye_half";
                eyeClose(img);
            }, tm.util.Random.randint( time1, time2 ));
        }
        function eyeClose(img) {
            setTimeout(function() {
                img.image = "eye_close";
                eyeOpen(img);
            }, tm.util.Random.randint( 10, 200 ));
        }
        function eyeOpen(img) {
            setTimeout(function() {
                img.image = "eye_normal";
                eyeHalf(img);
            }, tm.util.Random.randint( 10, 200 ));
        }
    }     
});


これでパチパチするようになったかと思います、お疲れさまでした!


説明下手のため分かりづらいところがあったかもしれないです。
疑問なところはガンガン質問していただけたら助かります!


それではまた何かできたら報告しますので、よろしくおねがいします(`・ω・´)


関連記事
このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント


LINEスタンプ

LINEスタンプ承認されました

スポンサーリンク

このブログについて


★全記事一覧★

人気記事

人気ブログランキング



おかげ様で1位なことがあります。
ありがとうございます!

良い感じのペンタブ



Intuoscomicを使用しています 使い易いです。
替え芯やCLIP STUDIO、Pixiaなど絵を描く専用のソフトも数種付属しています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。