見辛くて見る気がなくなるのでこちらに移動しました。
- 用語チェック~キーフレーム~とテンプレ
- 右から左に移動させる。
- 右から左に消える。キーフレーム版
- キャラクターを振動させる。chara_shake.ksプラグイン
- キャラクターを透明にする.
- キーフレームによる連続アニメーション
- 繰り返すキーフレームアニメーションを停止
魔法・エフェクトを表示する試み
物理・エフェクトを表示する試み
気持ち・エフェクトを表示する試み
用語チェック~キーフレーム~とテンプレ
キーフレームアニメとは?
詳細をみる
テンプレ
[keyframe name="animation_name"] ;動かすための名前nameを半英文字で指定
[frame 100%完了するまでのどれくらい時% 動作内容1 動作内容2]
[endkeyframe];アニメ設定おわり。
;アニメ実行命令kanim ここで繰り返しinfiniteが設定できます。
[kanim name="アニメーションさせる画像やテキストのnameを指定 キャラなら表示に使用したname"
keyfname="animation_name" time="5000" cunt="1"]
;繰り返しならcunt="infinite"
[wa];終わるまでウエイト
テンプレの詳細
詳細をみる
*100%完了するまでのどれくらい時%
例 p=40% p=100%
%ごとに[frame~~]を書く。
%を割り振る場合[endkeyframe]の前に100%の[frame~~]
つまり、[frame p=100% 動作内容]を忘れずに。
*動作内容1 2・・
■回転
rotate (単位はdeg 例=10deg)
>横方向 rotate
>縦方向 rotate
■拡大、縮小
scale
>横方向拡大縮小 scaleX
>縦方向拡大縮小 scaleY
■遠近感
perspective 一部ブラウザのみ
■傾斜
skew
>横方向 skewX
>縦方向 skewY
■透明度
opacity
opacity=0 で完全透明
画像は管理人が実際作ったゲームです。キャラクターは引用元のものです。
詳細をみる
[chara_show name="yuri" top=60 left=350]
じゃあ、最初にちょっと移動してみる[p]
[anim name="yuri" left = 40 ]
[wa]
次は右へ移動する[p]
[anim name="yuri" left = 800 ]
[wa]
すごいでしょ。[p]
[anim name="yuri" left = 350 ]
[wa]
右から左に消える。キーフレーム版
[cm]キャラ名[r]「走る~」[l][r]
スクリプトサンプルをみる
[keyframe name="animation2"]
[frame p=100% x="-400" opacity=0 ]
[endkeyframe]
;---------アニメーションさせるキャラクターの定義
[chara_new name="charaName" storage="charaName.png" jname="キャラ名"]
[chara_show name="charaName" wait=true]
;---------アニメーションの実行 5秒かけてキーフレームアニメーションを実行する
[kanim layer=0 keyframe="animation2" time="5000" ]
[wa]
タグリファレンスより。
p パーセンテージを指定してください。例えば5秒かかるアニメーションに対して20%の位置という指定になります。
0~100%の間で指定してください。
0%を省略することで前回のアニメーション状態を継承して新しいアニメーションを開始できます。
キャラクターを振動させる。
(背景ではなくキャラをクエイク)
詳細をみる
つぎは、キャラクターを揺らすアニメーションを試してみるよ[p]
;プラグイン読み込み http://tyrano.jp/home/booster_samples のダウンロードファイルにあり。
[call storage="examples/08_anim/chara_shake.ks"]
;開始
[chara_shake name="yuri" count=5 swing=20 time=100]
ゆれたよ![p]
;透明度を上げる処理を開始、wa を指定しないので、会話の中で徐々に透明になっていく演出ができる
;opacity= 50の数値で変化。再表示する必要が無いなら、退場するのを忘れないで下さい。(その場合、timeがかかった、単なる退場でも良いかも)
詳細をみる
大きさや透明度、色なんかもアニメーションできるから[p]
いろいろ、試してみてね[p]
[anim name="yuri" opacity= 50 time=3000]
[wa]
あれーーー、わたしなんか、薄くなってきてる~ >< [p]
もどれ~[p]
[anim name="yuri" opacity= 250 time=100]
ほ、、たすかった。[p]
詳細をみる
では違う動きもするね。[p]
;------------keyframe の定義
[keyframe name="animation1"]
[frame p=20% x="100" ]
[frame p=40% x="-100" ]
[frame p=60% y=100 ]
[frame p=80% y=-400 scale=0.5 rotate="360deg" ]
[frame p=100% scale=1 y="300" rotate="0deg"]
[endkeyframe]
;ここまでどんな動きをするのか設定しました。実際に動く命令は以下文からです。
;---------アニメーションの実行 5秒かけてキーフレームアニメーションを実行する
[kanim name="yuko" keyframe="animation1" time="5000" ]
[wa]
わーすごい動きしちゃった![p]
およその動きイメージ
pは完了100%の間における表示割合指定・・表示順番でもある。
scaleやrotateのCSSアニメーションを学ぶ
繰り返すキーフレームアニメーションを停止
;----サンプルソース---
[kanim layer=0 keyframe="animation1" time="5000" count="infinite"]
クリックでアニメーションを停止します[l]
[kanim layer=0 keyframe="animation1" count="0"]
;---------------------
また、絶対位置の「*」ですが、これは数字の前に付けます。(以下が例になります)
[frame p=20% x="*100"]
anim efect
jswing|def|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|easeInQuart|easeOutQuart|easeInOutQuart|easeInQuint|easeOutQuint|easeInOutQuint|easeInSine|easeOutSine|easeInOutSine|easeInExpo|easeOutExpo|easeInOutExpo|easeInCirc|easeOutCirc|easeInOutCirc|easeInElastic|easeOutElastic|easeInOutElastic|easeInBack|easeOutBack|easeInOutBack|easeInBounce|easeOutBounce|easeInOutBounce
動画にはdefはありません
すべてを組み合わせた例
詳細をみる
@layopt layer=1 visible=true
[image name=hato1 storage=hato2.png layer=1 top=1000 left=-1500]
[anim name=hato1 left=600 top=-1500 time=2000 effect=jswing]
anim efect:jswing
[wa]
[er]
[freeimage layer=1]
[bg storage="sky.jpg" time="100"]
[image name=hato1 storage=hato3.png layer=1 top=-100 left=500]
;----keyframeの定義
[keyframe name="hato"]
[frame p=100% y="-2000" scale=0.3 x="-2000"]
[endkeyframe]
[kanim name=hato1 keyframe=hato]
;-----定義したアニメーションを実行
[wa]
;jsで画像の変更
[iscript]
$(".hato1").attr({ src: "./data/fgimage/hato1.png",
title: "jQuery" });
[endscript]
;[wa]を使用しない場合他と連続したアニメ風になる