忍者ブログ

そうだったのかブログ

コンテンツ制作処「へすにてーる」の中の人が、ゲームつくりに、プログラミングに、悪戦苦闘するブログ。 あと、ゲームのプレイ記録とかも。

ティラノでGIFアニメが使えるんだね、どうやってGIFアニメつくる?透過で。

えっとですね。

ティラノビルダーで透過GIFアニメを使ってみたいなあ。と思いました。

そんで、ティラノで普通にGIFアニメを用意して画像として使えばいいのかなあ。と思いました。

そこまではその通りだったと思います。


透過GIFアニメをつくる

えーと、透過するGIFアニメをつくるんですが。どうやってつくるか。

・アニメする画像を用意して、オンラインのサービスでアニメGIF化する。

FireAlpacaをよく使ってるんですが、連携しているAlpacaDougaなどで、サクサクアニメGIFにしてくれます。画像はPNG、JPG、GIFを扱えるみたい。

ではオニオンスキンモードで作った複数レイヤーを連番にファイル保存して(全部透過pngです)alpacadougaに突っ込んだら…動いたできた!でも透過してない!

透過PNGを使ったのに透過してない!

透過は?

・透過GIFのファイルをつくる。

FireAlpacaでは、なんか、書き出しとか保存に、そういう形式はないんスけど…。


GIMPでつくる

というわけで、たまたまあったGIMPにはGIFの書き出しがありました。
しかも、複数レイヤーをひっくるめてアニメーション化してくれる機能もありました!
元の透過PNGファイルを全部、GIMPにおとして、透過GIFアニメとしてエクスポートできました。

▲なんかキショイけど、キショイのをつくる予定だったので。

感想

 なんだ、GIMPでいいんだ。これで、ティラノでも使える透過GIFアニメがつくれる。

おわり。

拍手[0回]

PR

APNGを使うのはどうなんだろう?

gifアニメを出力してて思った。

・透過できるんだっけ?→1色の透過色指定ができる、半透明は不可。
・pngだアルファチャンネルの半透明のpngアニメがつくれるんだっけ?→そういうわけでも?
・透過処理をキレイしたgifアニメのようにしたいんだけどなあ。


というわけで、pngによるアニメーションファイルをつくれるのかな?という話です。


MNGとAPNG


 あ、最初にお断りしておきますが、詳しいことは調べません。もっぱら概要なので。

 pngにアニメ機能を持たせる話は、どうもGIFの特許問題が発生した時期に絡むみたいで。
 代替フォーマットをつくっといた方がよかんべ、という感じだったのか?

 そこで出たのが、『MNG』。

 え?MNG…って何?

 なんかjpegとか絡めたJNGというのもあるとか(wikiには書いてある)。

 正式運用の実例は少ないとかなんとか。

 んで、APNG。
 
 なんかFirefoxブラウザでしか使えなかった、ような記述が。
 そもそもがmozilaが推してたフォーマットとかなんとか。
 IEとかエッジでは再生できないとか。


APNGならいいのかな?

 MNGでお手軽にアニメーションだ~という気分にならないのですが(@_@;

 グーグルでAPNGを検索したところなんですが、情報が2017年頃のものが多い感じ…。
 chromeでAPNG再生に対応したのが、2017年頃だそうで。
 アニメGIFにかわってAPNGだ!…というノリでしょうか。
 でも、2019年も終わりそうな今、いまいちそういう感じでもないような。

 でもAPNGの機能はいい感じみたい。LINEスタンプとかで使ってるみたいだし。


ブラウザの対応の問題なのかなあ?

 機能はいい感じなのに、まだ「アニメ画像?…gifですか?」と言いたくなるのはなんでかな。
 APNGは2004年頃できたみたいで、研鑽は十分されてるような感じ?じゃない?
 すると、マイクロソフトのブラウザが非対応となってるからなのかな?
 非対応ブラウザでも、HTMLになんか記述すると再生できるみたい。だけど自分でやるのは面倒くさそうかなあ。


アニメーションの問題なのかなあ?

 コマ撮りアニメと、キーフレームアニメ。
 突然キーフレームアニメという単語が出ましたが、ふと思っただけです。
 それらは全然別モノだと思うけど、キーフレームアニメが得意そうな動きを、コマ撮りアニメにするのは、結構めんどそうかなとか感じるんですが。地味というか。

 つか、キーフレームアニメで作る方が、便利なこといっぱいだったりする?ひょっとして?
 もうAPNGとか、gifアニメとかって、あまりいいことない?いやいや、まさか。


APNGことなどを調べてみた感想

まずブラウザと名のつくもの全部に対応してるわけじゃなさそうなので、それが何やら制作する段階で「イレギュラーの処理するのって、間違い起きそうだし、面倒そうだなあ」と思っちゃうかも。ならGIFアニメがいいや。ってなるかも。

おわり


拍手[0回]


ティラノビルダーでストップウォッチつくってみた

こんにちは。

ティラノビルダーで自作ストップウォッチをつくってみました。

初心者なのでシンプル、カンタンなことしかできませんので、そのようになっております。

ほぼ概念だけです。


ティラノビルダーの流れ

 ストップウォッチ稼働フラグf.flagをつくる。
 ラベルをつくっとく。*button としておく。
 ティラノスクリプトでglinkのボタンを設置する。
  if文でf.flagが0ならtext=”start"のglinkをつくる。elseの方にtext="stop"のglinkをつくる。
  どちらもtarget=*timer としておく。
 停止タグ[s]で止めとく。
 ラベル作っとく。*timer 。

 javascriptでタイマー表示部分をつくる。

  var time=0;
  var ctx = $('canvas')[0].getContext('2d');
  if(f.flag==0){
   f.flag=1;
   f.timer=setInterval(ohaoha,1);
   }else{
   f.flag=0;
   clearInterval(f.timer);
  }
 
  function ohaoha(){
   time++;
   ctx.fillStyle='rgb(0,0,0)';
   ctx.fillRect(100,200,100,-30);
   ctx.fillStyle='rgb(255,255,255)';
   ctx.fillText(time,100,200);
  }

 最期にjumpでtarget=*button としてボタン表示させる。


流れの説明

 フラグによってstartかstopのボタンを表示しておく。そんで停止。
 ボタン押すとラベルtimerにとぶ。
 スクリプトは、if文によってフラグでタイマー稼働と、停止に分岐する。
 分岐先でフラグを変化させておく。
 最後にラベルbuttonにとんで、またボタンを表示。


ポイントだと思った部分

 f.がついたティラノの変数はスクリプト部分を抜けても保持される。
 スクリプト内でf.の変数も普通に使えるんですね。知らなかった。
 フラグはもちろん、setIntervalに使えてよかった。

 setInterval()はそのままでも、変数に代入させても、おなじように動いた。
 なんか不思議。

 seInterval()のカッコに関数を入れるが、その関数名に()つけない。
 つけたら動かなかった。

おわり

拍手[0回]


canvas、文字の座標と図形の座標【javascript】

こんにちは。

javascriptでcanvasに図形と文字を描画したときの記録です。


同じ座標に文字と図形を描く

ctx を canvas の getContext('2d') したものにして(ひどい説明)。

 ctx.fillRect(200,300,50,50);  //x200,y300の位置から50、50の矩形を描画する。

 ctx.fillText('おはよう',200,300);  //x200,y300の位置に おはよう と文字を描く。

ということする。


すると、図形は200,300から右に50の幅、下に50の幅の矩形を描く。
そして、文字は200,300を左下として、描かれる。



▲これは説明用の図。

文字を描画して、図形で消そうと思って同じ座標で指定したら消えなかった。
確かめてみたらこういう事だった、というだけです。



おわり



拍手[0回]


【ティラノビルダー】入力フォームがうまくいかない【ティラノスクリプト】

こんにちは。
いまティラノビルダーで作業してます。
入力フォームを使った際の失敗と成功を備忘録しておきます。

入力フォーム

 ゲーム中に主人公の名前をプレイヤーに入力させるときなどに使う。
 ティラノスクリプトでのタグは[edit]です。
  name="f.test" の、ようにnameで入力内容を格納する変数を指定する。
 入力フォームが画面に表示されるとゲームは停止すると公式タグリファレンスにはある。

 …でも、停止タグ[s]で止めないと、ずんずん進んでしまうのですが。
 

入力確定

 入力フォームの内容を変数に格納するにはタグ[commit]を使う。
 これがないと、変数に格納されない。
  nameオプションの指定はなくても動いた。
 この[commit]タグを通過するとき、画面に入力フォームが表示されている必要がある。
 そうでないと、変数に格納されない。

[edit]から[commit]へ

 [edit]による入力フォームを表示させてゲームを停止[s]させる。
 そうでないとフォームに入力させる時間がない。
 ゲームを停止させたならば、ボタンなどでジャンプし[commit]タグの場所に移動させる。


これで流れはあっているのではないかと思うのですが。
でも、なんか[commit]させても、変数に入力内容が格納されないんだけど、となったのです。
以下、その内容

[commit]へのジャンプボタンは[button]を使う

 [glink]を使ったら、ダメでした。
 [button]でジャンプしたらうまくいきました。

 [glink]だと自動で[cm]がかかって[commit]する前に入力フォームが消えるのだろうと。
 [button]だと[commit]後に自分で[cm]して必要があるほど、画面を消さないのだなと。
 

とりあえず以上です。

拍手[0回]