<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>TINY野郎のブログ</title>
<link>https://ameblo.jp/tiny-yarou/</link>
<atom:link href="https://rssblog.ameba.jp/tiny-yarou/rss20.xml" rel="self" type="application/rss+xml" />
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com" />
<description>PC-6001、MSX、ぴゅう太など、昔のPCが大好きな人のブログ。</description>
<language>ja</language>
<item>
<title>P6イース2オープニングの作り方（６）</title>
<description>
<![CDATA[ <div style="line-height:20.3840007781982px;">約一年ぶりの更新ですが、前置きもなく、ささっと行きます。。。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><p><span style="line-height:20.3840007781982px;">前回の続きから。</span></p><div style="line-height:20.3840007781982px;">&nbsp;<hr></div><div style="line-height:20.3840007781982px;">続いては、イース2のオープニングを象徴するかのような、リリアの振り向きのシーンです。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">…といっても、インパクトのわりには全然たいしたことはやっておらず、１コマずつキャプチャーしたMSX2版の元絵をP6版に描きなおして、あとは単純に</span><span style="line-height:1.4;">アニメーションさせているだけです。</span></div><div style="line-height:20.3840007781982px;"><div style="text-align:center;"><div align="center"><span style="line-height:1.4;"><img alt="イメージ 1" class="popup_img_144_128" height="128" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/18/b2/p/o0144012814557423825.png" style="width:144px;height:128px;" width="144"></span></div></div></div><div style="line-height:20.3840007781982px;"><span style="font-size:14.56px;">枠の内側を描きかえています。</span><span style="font-size:14.56px;line-height:1.4;">速度的には大丈夫。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><div style="text-align:center;"><img alt="イメージ 2" class="popup_img_360_104" height="104" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/f6/1e/p/o0360010414557423834.png" width="360"></div><div style="text-align:center;">&nbsp;</div></div><div style="line-height:20.3840007781982px;"><span style="font-size:14.56px;">ベースの絵も入れると６コマです。</span></div><div style="line-height:20.3840007781982px;">本物より少ないですが、まあ、十分かなあと。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><div style="text-align:center;"><img alt="イメージ 3" class="popup_img_144_128" height="128" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/36/15/g/o0144012814557423851.gif" width="144"></div></div><div style="line-height:20.3840007781982px;"><span style="font-size:14.56px;">こんな感じになりました。</span></div><div style="line-height:20.3840007781982px;">&nbsp;<hr></div><div style="line-height:20.3840007781982px;">次のアドル発見シーンは、特に何もしていないので省略。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><hr></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">そして、いよいよ天空へのスクロールシーンです。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">たぶん、皆さんが興味があるのはここかなーと思ってはいたのですが、ブログでここにたどり着くまでに4年もかかってしまいました。。。すみません(^_^;)</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><div><img alt="イメージ 4" class="alignLeft popup_img_192_1920" height="1920" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/92/9e/p/o0192192014557423857.png" width="192"></div></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">これが全景です。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">192(P6的には96)x1920ピクセルです。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">まず、MSX2版の画像をキャプチャーして一枚の絵に繋げ、横の解像度を半分に落とし、セル分割して、いったい何パターンのセルで描かれているか調べてみました。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">すると、なんとこれだけの大きなグラフィックにも関わらず、</span><span style="line-height:1.4;">256パターンで収まったのです。</span><span style="line-height:1.4;">つまり、1セルを1バイトで表すことができると。これには驚きました。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">おそらく、MSX2版はそのような仕様で作られたのだと思いますが、ファルコムのデザイナーさんが、本当に素晴らしい仕事をされています。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">さて。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">１セル１バイトで表せるといっても、グラフィック全体では、パターンネームデータだけで横</span><span style="line-height:1.4;">24×縦240=5760バイトも必要になります。</span><span style="line-height:1.4;">さらに、各セルのグラフィックデータが１パターンあたり8バイト。256パターン弱で約2KB。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">つまり、このシーンを再生するだけで、合計7KB以上のデータが必要になるのです。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">この時点ですでにメモリはギリギリで、とても7KBものデータを入れる余裕はなく、「すべてのシーンをオンメモリで実装する」ということは、泣く泣く諦めざるをえませんでした。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">その後、他のシーンなども圧縮することで、キャラクターのグラフィックデータ</span><span style="line-height:1.4;">はなんとかメモリに置けそうにはなったのですが、5KBのパターンネームデータを置くには、どう頑張ってもメモリが足りません。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">かといって、ここで5KB分のデータをロードするとなると、数分間のロード待ちが発生し、明らかにテンポが損なわれてしまいます。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">そこで、いかにロード時間を短くするか、いかに絵を止めないようにするかを、必死に考えてみました。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">まず最初に考えたのは、分割ロードです。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">例えば、</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">「１画面分<span style="line-height:1.4;">スクロールするごとにロードする」</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">であれば、一度にロードするデータ量も少なくてすみますし</span><span style="line-height:1.4;">、そこまでテンポが悪くなることもないだろう、と思いました。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">しかし、実際は</span><span style="line-height:1.4;">BIOSを使ってロードする場合、</span></div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">「無音（3.4秒）＋ヘッダマークのピー音（3.4秒）」</span></div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">の、合計6.8秒の前置きが入ります。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">この後に実データをロードするわけで、<span style="line-height:1.4;">一画面ごとに7～8秒のロード待ちが発生することになり…</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="font-size:18pt;line-height:1.4;">全然ダメでした(T_T)</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">中途半端なところで画面が停止するのは思いっきり気になりますし、ロードの回数も多く、とにかくテンポが悪くなりすぎます。</span><span style="line-height:1.4;">完全に制御をとめて、全部ロードしてからスクロールするほうがまだマシなくらいです。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">なんとか前置きの6.8秒を短くでき</span><span style="line-height:20.3840007781982px;">ないだろうか。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">空送りやヘッダマークの時間を極限まで短くしたら、ピーガガ、ピーガガ、ピーガガと連続して読めないだろうか。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">そんなことを考えていたときに思いついたのが、</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><font size="5">ストリーミング</font></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">でした。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">考えたのは以下のような方法です。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">１）メインルーチンでは、テープからデータをロードして、ひたすらRAMに書き込んでいく。</span></div><div style="line-height:20.3840007781982px;">２）その裏で<span style="line-height:1.4;">割り込みルーチンを走らせ、データを一定バイト読み込むごとに、画面を描き換える。</span></div><div style="line-height:20.3840007781982px;">３）画面描き換えはすぐに終わらないので、メインルーチンを止めてしまうが、<span style="line-height:1.4;">その間もテープは回り続けるので、データを取りこぼすことが予想される。</span></div><div style="line-height:20.3840007781982px;">４）そこで、テープには予め描画処理時間分のダミーデータを挟んでおき、必要なデータは取りこぼさないようにする。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">取りこぼすデータのバイト数を試行錯誤のうえ12～13バイトと割り出し、ダミーデータは余裕を持たせて15バイトとしました。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">実際にテープにセーブされているデータは、以下のようになっています。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><div><img alt="イメージ 5" class="alignLeft popup_img_513_184" height="184" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/c2/df/p/o0513018414557423871.png" width="513"></div></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">「0E C1 D1 C7 C6 … 85 0E」と、描画エリアの横幅分（24バイト）のパターンネームデータが並んだ後に、ダミーデータの「FF」が15バイト並んでいます。</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">メインルーチンでは、テープを回しながら、ロードしたデータをRAMに書いていきます。</span><span style="line-height:1.4;">ただし、データがダミーデータの「FF」だった場合はRAMには書かずに「FF」以外のデータが来るまで待ちます。</span><span style="line-height:1.4;">つまり、24バイトロード→15バイト捨てる→24バイトロード→15バイト捨てる…を繰り返します。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">割り込みルーチンは、逆に「FF」“以外”のデータのときは何もしないのですが、「FF」が来ると、メインルーチンで新規にロードした24バイトを最上段に加えて、<span style="line-height:1.4;">画面を下側にスクロールさせます。</span><span style="line-height:1.4;">この描画の間メインルーチンは止まりますが、テープは動いているので、12～13バイト分、データを読みこぼします。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">割り込みルーチンの描画が終わると、メインルーチンが動き、再びデータを読み始めますが、テープからはまだ残り数バイトあるダミーデータ「FF」が送られてきているので、そのまま必要なデータが送られてくるのを待ちます。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">実際にはもう少しチューニングした流れになっていますが、</span><span style="line-height:20.3840007781982px;">これを繰り返すようにして実装してみたところ…</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><font size="5">うまくいきました！！</font><span style="line-height:20.3840007781982px;"><font size="1">（ただし、エミュレーター上では）</font></span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">テープが回ったまま、画面がスクロールしています！</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">テンポも損なっていませんし、完璧に近い流れです！</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:20.3840007781982px;">スクロールして画面内にイースの国が</span><span style="line-height:20.3840007781982px;">見えたときは、自分でも感動しました！</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;"><font size="5">これで万事解決！</font></span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;"><font size="5">…とはいかず(T_T)</font></span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">エミュレーターではうまく動作するのですが、実機ではどうしてもうまくいかないのです。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">テープからのロードの裏でストリーム関連の割り込み処理をしつつ、さらにBGM再生</span><span style="line-height:20.3840007781982px;">も加わったせいで</span><span style="line-height:1.4;">（「TO MAKE THE END OF BATTLE」の演奏は、処理的にもかなりいっぱいいっぱいなのです）、CPUが普通にテープからのデータをとりこぼすようになってしまったのです。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">P6オフの参加者の皆さんに協力していただいた結果、</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><font size="5">データの区切りであるストップビットを増やす</font></div><div style="line-height:20.3840007781982px;">（つまり、ピーガー音に細工をしたWAVファイルを、PCで作成する）</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><span style="line-height:1.4;">という、当時では不可能な解決法を教えていただき、WAVファイルまで作ってくださいました。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">※実機での動作検証をしていただいたときの流れはこちら</div><div><a href="http://togetter.com/li/144517" target="_blank">http://togetter.com/li/144517</a></div><div>※jotさん作・感動の実機版動画はこちら</div><div><a href="http://www.nicovideo.jp/watch/sm14690761" target="_blank">http://www.nicovideo.jp/watch/sm14690761</a></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">このように、私だけでなく皆さんの協力のおかげもあって、<span style="line-height:1.4;">やっと実機でも動作するようになったのでした。</span></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;"><font size="5">めでたしめでたし(^_^)</font></div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">&nbsp;</div><div style="line-height:20.3840007781982px;">※ちなみに後日、「ストップビットを増やしたWAVファイル」を作成するツールを自作しました。</div><div style="line-height:20.3840007781982px;"><a href="http://www.tiny-yarou.com/datarec.html" target="_blank">http://www.tiny-yarou.com/datarec.html</a></div><div>&nbsp;</div><div>&nbsp;</div><div><div>P6イース2オープニングの作り方一覧</div><div>（１）<a href="https://ameblo.jp/tiny-yarou/entry-12513973712.html">https://ameblo.jp/tiny-yarou/entry-12513973712.html</a></div><div>（２）<a href="https://ameblo.jp/tiny-yarou/entry-12513973742.html">https://ameblo.jp/tiny-yarou/entry-12513973742.html</a></div><div>（３）<a href="https://ameblo.jp/tiny-yarou/entry-12513973765.html">https://ameblo.jp/tiny-yarou/entry-12513973765.html</a></div><div>（４）<a href="https://ameblo.jp/tiny-yarou/entry-12513973789.html">https://ameblo.jp/tiny-yarou/entry-12513973789.html</a></div><div>（５）<a href="https://ameblo.jp/tiny-yarou/entry-12513973829.html">https://ameblo.jp/tiny-yarou/entry-12513973829.html</a></div><div>（６）<a href="https://ameblo.jp/tiny-yarou/entry-12513973851.html">https://ameblo.jp/tiny-yarou/entry-12513973851.html</a></div></div><div>&nbsp;</div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973851.html</link>
<pubDate>Tue, 24 Mar 2015 16:08:16 +0900</pubDate>
</item>
<item>
<title>P6イース2オープニングの作り方（５）</title>
<description>
<![CDATA[ <p>ブランクなどなかったかのように突然続きを書いてみます（笑）<br>&nbsp;</p><hr><div><br>続いては、ダームの塔からアドルが天空に発射されるシーンについてです。<br><br>オリジナルのMSX2版はこんな感じです。<br><img alt="イメージ 1" class="popup_img_164_288" height="288" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/ca/8f/p/o0164028814557423747.png" width="164"><br><br>これを元に、P6版のデータは、容量を削減するために左右を少しだけ削り、また、中心のアニメーションする部分を4ドット（１バイト幅）に収まるようにして、書き換え面積を減らしました。<br><img alt="イメージ 2" class="popup_img_144_288" height="288" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/1b/0e/p/o0144028814557423754.png" width="144"><br><br>よく見ていただけると分かる通り、中央の部分はプログラムで同じパターンを繰り返しVRAMに書いているだけです。アニメーションとはいえないほどショボいですが、とにかくメモリとの戦いだったので、この辺りは割りきって削減しました。<br><br>ちなみに、最初のフラッシュは、お得意のXORです(^_^;)</div><table border="0"><tbody><tr><td><br><img alt="イメージ 3" class="popup_img_144_288" height="288" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/52/81/p/o0144028814557423759.png" width="144"></td><td><br><img alt="イメージ 4" class="popup_img_144_288" height="288" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/30/2e/p/o0144028814557423769.png" width="144"></td></tr></tbody></table><p>&nbsp;</p><hr><p>&nbsp;</p><div><br>次は、上空をアドルが飛んでいることを連想させる高速アニメーションシーンです。<br><img alt="イメージ 5" class="popup_img_289_384" height="384" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/b6/4f/p/o0289038414557423775.png" width="289"><br><br>高速でアニメーションをさせるためには、書き換える部分をできるだけ減らすことが重要なので…<br><br>最初は赤枠の部分だけアニメーションをループして…<br><img alt="イメージ 6" class="popup_img_144_48" height="48" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/b1/85/g/o0144004814557423781.gif" width="144"><br><br>途中から水色の枠の部分のアニメーションが始まるようにしています。<br><img alt="イメージ 7" class="popup_img_144_128" height="128" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/be/ea/g/o0144012814557423787.gif" width="144"><br>いくら遅いP6といえども、これくらいの面積の書き換えであれば全く問題ないのでした。</div><hr><div><br>続いて、イースの国が横に２ドットずつスクロールしていくシーンです。<br><img alt="イメージ 8" class="popup_img_513_385" height="385" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/1e/50/p/o0513038514557423792.png" width="513"><br><br>このスクロールは、Z80のアセンブラ命令「RLD(Rotate Left Digit)」を使っています。</div><table border="1"><tbody><tr><td><code>A = ○○○○××××<br>(HL) = △△△△□□□□<br>↓<br>RLD命令実行<br>↓<br>A = ○○○○△△△△<br>(HL) = □□□□××××</code></td></tr></tbody></table><p><br>RLDは、2進化10進表現（10進数の数字1桁を、そのまま16進数の1桁として表す方法）の桁シフトとして使われる命令ですが、HLレジスタが示すアドレスの内容を4ビット一気にシフトしてくれるので、P6のSCREEN3でこれを使うと、VRAMを簡単に2ドット単位でスクロールさせることができます。<br><br>スクロール部分のアセンブラソースはこれだけです。<br><img alt="イメージ 9" class="popup_img_555_254" height="254" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/2e/2a/p/o0555025414557423797.png" width="555"><br><br>また、右端の２ドットは何も触っていないので、シーン後半を良く見てもらえれば、右側数ドットには同じデータがコピーされていることがわかると思います。<br><br><img alt="イメージ 10" class="popup_img_215_128" height="128" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/31/7e/p/o0215012814557423805.png" width="215"><br><br>スクロールしながらキラキラが飛んで行くところは、見ての通り、描画も消去もXORで行なっています。<br>XOR描画は見た目的にはあまり美しくないのですが、タイトル画面の「NOW LOADING」と同じく元のグラフィックデータを保持するメモリがないことと、処理速度を稼ぎたいということで、そうしました。</p><p>&nbsp;</p><hr><p>&nbsp;</p><div><br>…という感じで、今日はこの辺りまで。<br><br>また気が向いたら続きを書きたいと思います。<br><br>質問などがあれば、このブログのコメント欄…<br>…は滅多に見ないので、できればTwitterで <a href="https://twitter.com/tiny_yarou" target="_blank">@tiny_yarou</a> までお願いします！</div><div>&nbsp;</div><div><hr></div><div><div style="font-size:14.56px;line-height:20.384px;"><div><p>P6イース2オープニングの作り方一覧</p><p>（１）<a href="https://ameblo.jp/tiny-yarou/entry-12513973712.html">https://ameblo.jp/tiny-yarou/entry-12513973712.html</a></p><p>（２）<a href="https://ameblo.jp/tiny-yarou/entry-12513973742.html">https://ameblo.jp/tiny-yarou/entry-12513973742.html</a></p><p>（３）<a href="https://ameblo.jp/tiny-yarou/entry-12513973765.html">https://ameblo.jp/tiny-yarou/entry-12513973765.html</a></p><p>（４）<a href="https://ameblo.jp/tiny-yarou/entry-12513973789.html">https://ameblo.jp/tiny-yarou/entry-12513973789.html</a></p><p>（５）<a href="https://ameblo.jp/tiny-yarou/entry-12513973829.html">https://ameblo.jp/tiny-yarou/entry-12513973829.html</a></p><p>（６）<a href="https://ameblo.jp/tiny-yarou/entry-12513973851.html">https://ameblo.jp/tiny-yarou/entry-12513973851.html</a></p></div></div></div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973829.html</link>
<pubDate>Sun, 16 Mar 2014 19:56:18 +0900</pubDate>
</item>
<item>
<title>パピコンクリッカー</title>
<description>
<![CDATA[ プチデベロッパーでブラウザアプリのお勉強。<br><a href="http://www.tiny-yarou.com/ppcc/" target="_blank">http://www.tiny-yarou.com/ppcc/</a><br><br><br>あくまでもお遊びの、かなりふざけたゲームですが、暇つぶしにでもどうぞ。<br><br>クリッカーの旬はとっくに過ぎたけれど(^_^;)<br>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973800.html</link>
<pubDate>Mon, 21 Oct 2013 01:40:44 +0900</pubDate>
</item>
<item>
<title>P6関連のツールとか</title>
<description>
<![CDATA[ 最近、P6関連のツールを２つほど作りました。<br><br><b>1) よっしゅさんのPSGドライバ用MMLコンパイラ</b><br><ul><br><img src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/03/65/p/o0979075014557423725.png" alt="イメージ 1" class="popup_img_979_750" width="560" height="429"><br>よっしゅさん作成のPSG音源ドライバ用データを、PCで作成するための、Windows用ツールです。<br></ul><br><div><br><b>2) PC-6001(32K)用PCGライブラリー</b><br></div><ul><br>PC-6001初代機で、PCG機能を実装するための、コンパクトなライブラリーです。<br>USR関数の勉強のために作りました。<br></ul><br><div><br>どちらのツールも、こちらからダウンロードできます。<br><a href="http://www.tiny-yarou.com/deepp6.html" target="_blank">http://www.tiny-yarou.com/deepp6.html</a><br></div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973796.html</link>
<pubDate>Mon, 02 Apr 2012 19:19:14 +0900</pubDate>
</item>
<item>
<title>P6イース2オープニングの作り方（４）</title>
<description>
<![CDATA[ <p>４ヶ月も放置とか…すみません。<br><br>もうP6イース2の話題もすっかり昔のこととなってしまいましたが、最初のシーンから順に、作るにあたっての苦労話や工夫した点などを色々と思い出しながら書いてみようと思います。<br><br>-----<br><br>冒頭のダレス登場シーンと、最初の夜明けのシーン。<br>共通して苦労した「フェードイン」について書きます。<br><br>PC-6001のSCREEN3では、４色しか使えません。<br>パレットチェンジなどという芸当もできません。<br><br>しかし、演出上、フェードイン（アウト）させたい場所があります。<br><br>まず、最初のダレスのシーンです。<br><br><img alt="イメージ 1" class="popup_img_160_671" height="671" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/be/0f/p/o0160067114557423676.png" width="160"><br><br>背景がフェードインしてきます。<br><br>このシーンは、作り始めてすぐだったということもあって、何も考えずにPC上で画像を作成し、すべてのパターンデータを持たせることにしました。<br><br>書き換える部分は11x14=154セル、それを3枚。<br><br>細かい部分が多く、セルの共通化もほぼできないということもあって、めちゃめちゃメモリを使っています。<br><br>このシーンは本編から独立していることもあって、なんとかメモリに載せることはできたのですが、作っている最中から、<br><br><font size="+1"><b>「この作り方はヤバい」</b></font><br><br>という気がしました。<br><br><br>メモリ問題はすぐに表面化しました。<br><br>タイトル画面の後の、本編最初のシーン。<br>ダームの塔の夜明け。遠くに見える山の間からキラリと太陽の光が見え、塔が明るくなるシーンです。<br><br>４色しか出せないうえに解像度も低いP6では、他機種のように滑らかに色を変化させることは無理です。<br>目標を「夜から朝へ移り変わったことが表現できれば良い」と割り切ることにしました。<br><br>とはいえ、基本的には最後までオンメモリで動かしたいので、ダレスのシーンのようにフェード用のパターンデータをすべて載せるわけにもいきません。<br><br>そこで、プログラム処理だけでフェードっぽく見えるよう、色々と試すことにしました。<br><br>まず、１ライン抜きです。<br><br>VRAMへの描画の際に、Y座標を1ライン置きに描画すれば良いので、プログラム的には簡単です。<br><br><img alt="イメージ 2" class="popup_img_160_120" height="120" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/fa/b4/g/o0160012014557423682.gif" width="160"><br><br>ダメですね。<br>いかにも「１ライン抜きました」的な絵になってしまいました。<br>しかも、１ライン抜いたところで全く夜には見えませんし、元々メッシュで描いてある山は縦縞になってしまいました。<br><br>次の方法を考えます。<br><br>元の絵を全体的に暗くするために、青のメッシュをかけてみます。<br><br><img alt="イメージ 3" class="popup_img_160_120" height="120" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/e0/02/g/o0160012014557423693.gif" width="160"><br><br>これもダメです。<br>元々メッシュで塔に影を付けていた部分が埋もれてしまっていますし、山については赤の部分が全く隠れないので、メッシュをかけた効果はゼロです。<br><br>メッシュのタイリングパターンをずらしてみました。<br><br><img alt="イメージ 4" class="popup_img_160_120" height="120" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/96/16/g/o0160012014557423702.gif" width="160"><br><br>山の赤いドットが隠れることで、暗い感じは出ています。<br>塔の影の部分も、さらに暗くなってくれました。<br><br>ただ、やはりちょっと明るい。<br><br>雲や塔の黄色い部分は、メッシュをかけても明るく目立ってしまうため、どうしても夜の暗さが表現しきれません。<br><br>特に空と雲は、「夜→朝」というより、「メッシュあり→メッシュなし」としか見えません。<br><br>できれば、もっともっと暗い感じが出したいのです。<br><br><b>黄色は使わず、青と緑だけで表現するくらいがちょうど良いのかも…？</b><br><br>やってみましょう。<br><br>プログラムでドット単位で置き換えるということも不可能ではないですが、ここはPC-6001のVRAMの特徴を上手く使って、最低限の処理で、これを表現することにしました。<br><br>PC-6001のSCREEN3は、VRAMの2ビットで1ドットを表しています。<br><br>[00]…緑<br>[01]…黄<br>[10]…青<br>[11]…赤<br><br>例えば、<br><br>緑黄青赤<br><br>とドットが並んでいた場合、<br><br>[00][01][10][11]<br><br>となるわけですが、ここでVRAMと &amp;hAA(２進数で[10101010]) との AND を取ってみます。<br><br>[00][01][10][11]<br>[10][10][10][10]<br>----------------AND<br>[00][00][10][10]<br><br>つまり、<br><br>緑黄青赤<br>↓↓↓↓<br>緑緑青青<br><br>ということになり、赤や黄色の部分も、青と緑に変換されます。<br>この操作を、先ほどの画像に行ってみました。<br><br><img alt="イメージ 5" class="popup_img_160_120" height="120" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/05/1e/g/o0160012014557423707.gif" width="160"><br><br><br>夜っぽいです。いい感じです。<br><br>これで、フェード用のグラフィックデータを一切持たせることなく、夜→朝への変化をつけることができました。<br><br>実際のシーンは、これにさらに１ライン抜きを加えることで、もう一段階暗い画像を作り、それを切り替えて日の出のシーンを表現しました。<br><br>たかがフェードですが、パレットを持たず、色数もメモリも少ない、P6ならではの苦労があったのでした。</p><div>&nbsp;</div><div>&nbsp;</div><div><div><hr></div><div><div style="font-size:14.56px;line-height:20.384px;"><div style="font-size:14.56px;line-height:20.384px;"><p>P6イース2オープニングの作り方一覧</p><p>（１）<a href="https://ameblo.jp/tiny-yarou/entry-12513973712.html">https://ameblo.jp/tiny-yarou/entry-12513973712.html</a></p><p>（２）<a href="https://ameblo.jp/tiny-yarou/entry-12513973742.html">https://ameblo.jp/tiny-yarou/entry-12513973742.html</a></p><p>（３）<a href="https://ameblo.jp/tiny-yarou/entry-12513973765.html">https://ameblo.jp/tiny-yarou/entry-12513973765.html</a></p><p>（４）<a href="https://ameblo.jp/tiny-yarou/entry-12513973789.html">https://ameblo.jp/tiny-yarou/entry-12513973789.html</a></p><p>（５）<a href="https://ameblo.jp/tiny-yarou/entry-12513973829.html">https://ameblo.jp/tiny-yarou/entry-12513973829.html</a></p><p>（６）<a href="https://ameblo.jp/tiny-yarou/entry-12513973851.html">https://ameblo.jp/tiny-yarou/entry-12513973851.html</a></p></div><div>&nbsp;</div></div></div></div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973789.html</link>
<pubDate>Wed, 12 Oct 2011 13:30:31 +0900</pubDate>
</item>
<item>
<title>P6イース2オープニングの作り方（３）</title>
<description>
<![CDATA[ <p>今回は、P6イース2オープニングデモ本編のメモリ管理と、データ圧縮について書いてみたいと思います。<br><br>まず、本編再生中のメモリマップはこのようになっています。<br><br><img alt="イメージ 1" class="popup_img_200_570" height="570" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/7c/35/p/o0200057014557423641.png" width="200"><br><br>「サブプログラム２」が、本編のシーンを制御するプログラムで、その後にシーン１からシーン８のデータが入っています。<br><br>ここで、「圧縮データ」というのがありますが、それについて説明します。<br><br>このデモを再現するにあたって、とにかくテンポというものを大切にしたかったので、できる限りロードはなくしたいと思っていました。<br>シーン７（天空へのスクロール）のパターンネーム(PN)データについてはさすがにメモリに載せるのは無理でしたが、それ以外のシーンはすべてオンメモリにしたかったのです。<br><br>しかし、全てのデータを詰め込んでみたところ、どうしても1KBほどメモリが足りませんでした。<br><br>前回のブログに書いたような細かいセルの削減を繰り返したり、デバッグ用のコードなども削ったのですが、それでも7～800バイト足りません。<br><br>この時点で、オフ会まであと３日くらいでした。<br><br>もう設計を変更している時間はありません。<br>かといって、アニメーションを削ってクオリティーを下げるのもやりたくありません。できるだけ「TINY」ではないものを作りたかったのです。<br><br>３秒くらい考えた挙句、データを圧縮してみることにしました。<br><br>・20KB近いデータのうち、800バイト減らせれば良い。<br>・時間がないので、簡単に実装できること。<br>・展開ルーチンが、処理的にも、メモリ的にも、軽くてすむこと。<br>・そもそも、圧縮アルゴリズムなんてほとんど知らない！<br><br>ということで、とりあえず、ランレングス圧縮をしてみることにしました。<br>同じデータが連続する場合に、データと個数を並べる、という方式です。<br><br>0FFHというデータを展開用のフラグにして、それ以外のデータはそのまま並べるようにします。<br><br>同じデータが続いている場合は、<br>&nbsp;</p><table bgcolor="ffffcc" border="0"><tbody><tr><td><span style="color:#000000;">FF (個数) (データ)</span></td></tr></tbody></table><p>&nbsp;</p><p><br>と、フラグの後に、繰り返し個数とデータを並べるようにしました。<br>個数が「0」の場合はデータ終端とします。<br><br>例えば、</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><table bgcolor="ffffcc" border="0"><tbody><tr><td><span style="color:#000000;">11 22 33 33 33 33 33 33 44 55 66</span></td></tr></tbody></table><p>&nbsp;</p><p><br>というデータがあった場合、</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><table bgcolor="ffffcc" border="0"><tbody><tr><td><span style="color:#000000;">11 22 FF 06 33 44 55 66 FF 00</span></td></tr></tbody></table><p>&nbsp;</p><p><br>となります。<br><br>同じデータが３個以上並ばないと意味がありませんし、フラグと同じ「FF」というデータを含む場合は、１個だけでもこのフォーマットで書かなければならないので、むしろ元データよりサイズが大きくなってしまいます。<br>効率は決して良くないですが、たった800バイト減ってくれれば良いので、とりあえず実装することにしました。<br><br>展開ルーチンはこうなりました。<br><br><img alt="イメージ 2" class="popup_img_517_412" height="412" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/7e/e9/p/o0517041214557423652.png" width="517"><br><br>単純な処理なので、24バイトで済みました。<br>（※追記：twitterで、“最初の「LD A,(HL)」の後に「INC HL」すれば１バイト減らせる”とのご指摘を受けました。その通りです！）<br>複雑な演算等も一切行っていないので、速度的にも全く問題ありません。<br>「処理的にも、メモリ的にも、軽い」を満たしてくれました。<br><br>というわけで、圧縮したほうが良いデータについては、この方式でどんどん圧縮し、結果的に、なんとかオンメモリに収めることができました。<br>ちなみに、一番減ったのは、シーン３（高速アニメーションシーン）で、ここだけで350バイトほど減りました。<br><br>また、メモリマップを見ると、シーン１（ダームの塔の夜明け）が非圧縮になっていますが、これは展開したデータを置くメモリがないからです。<br>シーン２以降は、シーン１のデータがあった場所を展開用エリアとして使っていて、例えば、シーン２再生時のメモリマップはこうなります。<br><br><img alt="イメージ 3" class="popup_img_200_570" height="570" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/45/03/p/o0200057014557423664.png" width="200"><br><br>このように、圧縮データのシーンの場合は、再生前に先程の展開ルーチンを呼び出し、展開後のデータのアドレスをプログラムに渡すようにしました。<br>非圧縮データの場合はそのままのアドレスをプログラム側に渡しているので、プログラム的には何の変更もせずに済みました。<br><br>そんなわけで、本当にギリギリになって、メモリ上に（スクロールシーン以外の）すべてのデータを載せることができたのでした。</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><div>&nbsp;</div><div>&nbsp;</div><div><div><hr></div><div><div style="font-size:14.56px;line-height:20.384px;"><div style="font-size:14.56px;line-height:20.384px;"><p>P6イース2オープニングの作り方一覧</p><p>（１）<a href="https://ameblo.jp/tiny-yarou/entry-12513973712.html">https://ameblo.jp/tiny-yarou/entry-12513973712.html</a></p><p>（２）<a href="https://ameblo.jp/tiny-yarou/entry-12513973742.html">https://ameblo.jp/tiny-yarou/entry-12513973742.html</a></p><p>（３）<a href="https://ameblo.jp/tiny-yarou/entry-12513973765.html">https://ameblo.jp/tiny-yarou/entry-12513973765.html</a></p><p>（４）<a href="https://ameblo.jp/tiny-yarou/entry-12513973789.html">https://ameblo.jp/tiny-yarou/entry-12513973789.html</a></p><p>（５）<a href="https://ameblo.jp/tiny-yarou/entry-12513973829.html">https://ameblo.jp/tiny-yarou/entry-12513973829.html</a></p><p>（６）<a href="https://ameblo.jp/tiny-yarou/entry-12513973851.html">https://ameblo.jp/tiny-yarou/entry-12513973851.html</a></p></div><div>&nbsp;</div></div></div></div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973765.html</link>
<pubDate>Wed, 08 Jun 2011 13:34:07 +0900</pubDate>
</item>
<item>
<title>P6イース2オープニングの作り方（２）</title>
<description>
<![CDATA[ <p>前回は、ダレス登場シーンのメモリ管理について書きましたが、オープニング本編について書く前に、「グラフィックの省メモリ化」について書いておこうかと思います。<br><br>グラフィックを表示する際、私がP6で作るもの全てで必ず使っているのが、自作のPCGエンジンです。<br><br>画面上のすべてのグラフィックは、8x8(SCREEEN3は4x8)ドットのセルで管理され、すべてセル単位での描画・消去などを行っています。<br>00H～FFHまでの最大256パターンのキャラクターデータを定義して、あとはLOCATEとPRINTでその番号を指定して表示するイメージです（実際はもうちょっと複雑ですが）。<br><br>元々は「グラフィックを消したり、書き換えたり、位置を合わせたりする場合に、セル単位のほうが管理がしやすい」という理由で使っていたPCG方式なのですが（ドット単位での書き換えなんて考えたくない…）、メモリ的には「同一のセルがあればデータを減らせる」というメリットもあります。<br><br>今回の場合は、とにかく１バイトでもメモリを削減したかったので、このメリットを最大限に利用しました。<br><br>具体例として、リリアのグラフィックをどう作ったかについて書いてみます。<br><br>まず、今回のP6版ですが、基本的には、<br><br><font size="+2"><b>MSX2版の移植</b></font><br><br>だということはお気づきの方も多いと思います。<br><br>リリアについても、MSX2版のリリアを元にしました。<br><br>これがMSX2版のリリアです。<br><br><img alt="イメージ 1" class="popup_img_304_256" height="256" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/96/c2/p/o0304025614557423558.png" width="304"><br>MSX2のSCREEN5の場合、512色から16色を選べるだけあって、とてもキレイな色使いになっています。<br><br>これを４色に減色します。<br>減色の際、私は手作業でパレットを変更することが多いです。<br>例えば、水色などは、シーンによって緑で表現したほうが良い場合もあれば、青で表現したほうが良い場合もあるので、ツールに任せて減色するよりも確実だからです。<br><br>減色すると、こんな感じになります。<br><br><img alt="イメージ 2" class="popup_img_304_256" height="256" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/24/52/p/o0304025614557423575.png" width="304"><br><br>いいですねー。<br>ただ、大抵、<font size="+2"><b>ここまではうまくいく</b></font> ことが多いです。<br><br>これを横の解像度を半分にします。<br>勝負の分かれ目です。<br><br><img alt="イメージ 3" class="popup_img_304_256" height="256" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/31/11/p/o0304025614557423584.png" width="304"><br><br>思っていたより全然イケそうです。<br><br>このデータを自作ツールに突っ込み、セルに分割してみると、こうなります。<br><br><img alt="イメージ 4" class="popup_img_615_520" height="473" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/9d/93/p/o0615052014557423591.png" width="560"><br><br>ここで、ピンクの枠のセルに注目です。<br>セル化するメリットとして、同一データが多ければ多いほどメモリ効率が良くなるわけですが、ピンクの枠のセルについては、ほぼベタなパターンにも関わらず、たった数ドットのために独自のデータを持たなければならず、もったいない感じです。<br><br>また、黒塗りの部分が「瞬き」のアニメーションに関わる部分なのですが、白枠のセルは、たった１ドットの青のためにアニメーションデータを持たせなければなりません。これももったいないです。<br><br>もちろん、修正してしまえば良いのですが、目の１ドットは顔の印象にも関わりますし、アニメーションする部分を修正すると、すべてのパターンのデータを合わせて修正しなければならないので、できる限り触りたくありません。<br><br>そんなわけで、思い切って全体を１ドット上にずらしてしまいました。<br><br><img alt="イメージ 5" class="popup_img_615_520" height="473" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/16/bb/p/o0615052014557423601.png" width="560"><br><br>これで、ピンクの枠のセルはすべてベタ塗りのセルになり、他のセルと共通化することができました。<br>白枠のセルはアニメーションには関係なくなり、瞬きに必要なセルの数も減りました。<br><br>さらに、水色の枠のセルなども気になるので、引き続き修正します。<br><br>そんな感じで、細かいドットの修正を繰り返してセルを削減し、元絵を見ながら手を加えたのが、完成版です。<br><br><img alt="イメージ 6" class="popup_img_304_256" height="256" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/01/09/p/o0304025614557423611.png" width="304"><br><br>気になるところは若干ありますが、ここまでできれば上出来ではないでしょうか。<br><br>横19バイト×縦128ラインなので、データをそのまま持つと2432バイトですが、セル化することにより、キャラクターグラフィック(CG)データが223パターン×8バイト=1784バイト、パターンネーム(PN)データが横19×縦16=304バイト、合計2088バイトになりました。<br><br>最終的に、雲や服にタイリングで陰を付けたりして、あまり効率が良くない絵になってしまいましたが、それでもベタで持つよりはかなり少なくなりました。<br><br>あとは、アニメーション部分だけを切り出し、減色・解像度変換します。<br><br><img alt="イメージ 7" class="popup_img_97_417" height="417" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/47/22/p/o0097041714557423622.png" width="97"><br><br>口が４パターン、目が６パターン。<br>セル単位での管理は、アニメーションをさせる際にも便利です。<br><br>というわけで、すべてのグラフィックデータは、こんな感じで作りました。</p><div>&nbsp;</div><div>&nbsp;</div><div><div><hr></div><div><div style="font-size:14.56px;line-height:20.384px;"><div style="font-size:14.56px;line-height:20.384px;"><p>P6イース2オープニングの作り方一覧</p><p>（１）<a href="https://ameblo.jp/tiny-yarou/entry-12513973712.html">https://ameblo.jp/tiny-yarou/entry-12513973712.html</a></p><p>（２）<a href="https://ameblo.jp/tiny-yarou/entry-12513973742.html">https://ameblo.jp/tiny-yarou/entry-12513973742.html</a></p><p>（３）<a href="https://ameblo.jp/tiny-yarou/entry-12513973765.html">https://ameblo.jp/tiny-yarou/entry-12513973765.html</a></p><p>（４）<a href="https://ameblo.jp/tiny-yarou/entry-12513973789.html">https://ameblo.jp/tiny-yarou/entry-12513973789.html</a></p><p>（５）<a href="https://ameblo.jp/tiny-yarou/entry-12513973829.html">https://ameblo.jp/tiny-yarou/entry-12513973829.html</a></p><p>（６）<a href="https://ameblo.jp/tiny-yarou/entry-12513973851.html">https://ameblo.jp/tiny-yarou/entry-12513973851.html</a></p></div><div>&nbsp;</div></div></div></div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973742.html</link>
<pubDate>Sun, 05 Jun 2011 16:34:18 +0900</pubDate>
</item>
<item>
<title>P6イース2オープニングの作り方（１）</title>
<description>
<![CDATA[ <p>先週の土曜日、初めて、「P6オフ会」というものに参加させてもらいました。<br><br>もう、とにかく最初から最後まで、感動しっぱなしでした。<br><br>P6シリーズの実機があれだけ並ぶのを見たのも子供の頃以来でしたし、大画面のプロジェクターで動く数多くのP6ソフトをただ見ているだけでも幸せでした。<br><br>また、30年経った今でも、多くの人たちがPC-6001シリーズに対して愛情を持っているということを、実際に感じることができたのも良かったです。<br><br>あまりにもネタが多すぎて、全て消化しきれなかったのが残念ですが、逆に言えば、今後継続的に開催しても、まだ何年も楽しめるということではないですか！<br><br>このような会を開催してくださったことに、本当に感謝の気持ちでいっぱいです。<br>関係者の皆様、ありがとうございました。<br><br>&nbsp;</p><hr><p>&nbsp;</p><div>さて。<br><br>オフ会ネタとして作成した「P6版イース2オープニング」ですが、こちらでは技術的なことについて書いていこうかと思います。<br><br><font size="+2">誰得？</font><br><br>…と思われるかもしれませんが、ごく一部の方が楽しんでいただければ、それだけで満足なのです！<br><br><br>では…<br><br><br>初回ということで、メモリ関連の話からいきましょう。<br><br>今回は、とにかくメモリとの戦いでした。<br><br>イース2のオープニングは、ご存知の通り、スタッフ紹介とイベントシーンが、交互にテンポ良く出てきます。<br>P6で再現するにあたり、１シーンごとにテープからデータをロードすればそれほど難しくないなーとは思ったのですが、数秒のシーンのあとに1分のロードが入ってしまっては、雰囲気が台無しです。<br>最初のダレス登場のシーンは分けるとしても、その後のシーンはすべてローディングなし、オンメモリで載せたいと思い、メモリの使い方には気を使いました。<br><br>とりあえず、P6イース2のメモリマップを、ざっくりと載せてみます。<br><br>まず、起動時からダレス登場シーンまでのメモリマップはこんな感じです。<br><br><img alt="イメージ 1" class="popup_img_200_540" height="540" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/ef/56/p/o0200054014557423524.png" width="200"><br><br>BASICからローダープログラムを読み込んだ後、8580Hからメインプログラムおよびダレス登場シーン制御用のプログラム（サブプログラム１）と、BGMデータ、各種グラフィックデータをロードしています。<br>黒枠の部分が、最初の「Now Loading... 0%-----100%」の間にロードしているデータです。<br><br>メインプログラムは、名前の通りすべての制御を司る部分で、描画用のサブルーチンやサウンドドライバ、フォントデータも含まれており、最初から最後まで常駐しています。<br><br>逆に、8FE0H以降は、完全にモジュールとして独立していて、シーンによって読み替えられるようになっています。<br><br>ダレスのシーンが最後まで再生され、「承知いたしました」ですべてが消えた後、メモリはこうなります。<br><br><img alt="イメージ 2" class="popup_img_200_540" height="540" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/fe/a0/p/o0200054014557423533.png" width="200"><br><br>BGM（TO MAKE THE END OF BATTLE）は、気合いを入れて再現したということもあって、思っていたよりかなり大きいデータになってしまったため、8000Hからのテキスト画面＋BASIC領域に転送することにしました。<br>この時点で、もうBASICには戻れません(；＿；)が、仕方ありません。<br>メインプログラムが8580Hという中途半端なアドレスからスタートしている理由は、このときのBGMデータのサイズを考慮に入れたからです。<br><br>さらに、セル単位のデータで格納されているタイトル画面を、さっさとグラフィック画面に描いてしまいます。これで元データはいらなくなります。<br><br>こうすることで、8FE0HからDFFFHまでを全て空けて、長い長いオープニングシーンのデータをここに詰め込むようにしました。<br><br>演出的には、ダレス後のロード中は「イース」のタイトル画面を隠しておいて、BGM再生開始と同時にドーン！と出せば格好良かったのですが、ご覧の通り、タイトルを隠しておこうにもメモリがないのです(；＿；)<br>モワッとタイトル画面が出て、その状態で「NOW LOADING」を出して待たせるという、あまり格好良くないことになってしまったのはそういう理由です。<br><br>ちなみに、「イース」画面での「NOW LOADING」が若干見にくい理由ですが、フォントを通常の表示ではなく、元画像とのXORで描いているからです。<br><img alt="イメージ 3" class="popup_img_320_160" height="160" src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/8f/02/p/o0320016014557423537.png" width="320"><br>すでにタイトルの元画像データがメモリ上に残っていないので、タイトル画面上にフォントを上書きしてしまうと、ロード後に戻せないのです。<br>ロードが終わっても「NOW LOADING」が出たままなのは格好悪いですし、かといって、「NOW LOADING」を消すために元画像データをメモリ上に保持していくのももったいない。<br>ということで、苦肉の策として、XORで表示を行い、ロード終了時には再びXORで「NOW LOADING」を描くことで元のタイトル画面に戻しています。<br><br>誰も気づかないかもしれませんが、こんなところにも苦労したのでした(＾＾；</div><p>&nbsp;</p><div>&nbsp;</div><div>&nbsp;</div><div><div><hr></div><div><div style="font-size:14.56px;line-height:20.384px;"><div style="font-size:14.56px;line-height:20.384px;"><p>P6イース2オープニングの作り方一覧</p><p>（１）<a href="https://ameblo.jp/tiny-yarou/entry-12513973712.html">https://ameblo.jp/tiny-yarou/entry-12513973712.html</a></p><p>（２）<a href="https://ameblo.jp/tiny-yarou/entry-12513973742.html">https://ameblo.jp/tiny-yarou/entry-12513973742.html</a></p><p>（３）<a href="https://ameblo.jp/tiny-yarou/entry-12513973765.html">https://ameblo.jp/tiny-yarou/entry-12513973765.html</a></p><p>（４）<a href="https://ameblo.jp/tiny-yarou/entry-12513973789.html">https://ameblo.jp/tiny-yarou/entry-12513973789.html</a></p><p>（５）<a href="https://ameblo.jp/tiny-yarou/entry-12513973829.html">https://ameblo.jp/tiny-yarou/entry-12513973829.html</a></p><p>（６）<a href="https://ameblo.jp/tiny-yarou/entry-12513973851.html">https://ameblo.jp/tiny-yarou/entry-12513973851.html</a></p></div><div>&nbsp;</div></div></div></div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973712.html</link>
<pubDate>Fri, 03 Jun 2011 12:53:07 +0900</pubDate>
</item>
<item>
<title>プチコン！</title>
<description>
<![CDATA[ お久しぶりです。<br><br>プロジェクトが終わったので<br>たまった有給をまとめて消化したと思ったら、<br>震災関連で急に休暇になったりで、<br>気がつけば30連休中のTINY野郎です。<br><br>今、私の中では、<br>3/9にDSiWareとして配信された「プチコン」がアツいです。<br><a href="http://smileboom.com/special/petitcom/index.html" target="_blank">http://smileboom.com/special/petitcom/index.html</a><br><br>初めて触れた言語がBASICだった<br>アラフォー世代にはたまりません。<br><br>早速、プチコン関連の動画をニコ動にアップしました。<br><a href="http://www.nicovideo.jp/mylist/24407540" target="_blank">http://www.nicovideo.jp/mylist/24407540</a><br><br>これがBASICで動くというのが感動です！<br><br><hr><div><br><br>さて。<br><br>プチコンには、サンプルツールとして、<br>"CHRED"というキャラクターエディタが付属しており、<br>このツールを使うことで<br>簡単にゲームのキャラクターなどを作成することができます。<br><br>ツールの使い勝手自体は悪くはないのですが、<br>いくつか仕様上の問題点があり、<br>特にスプライトを使う場合は致命的だったりします(;_;)<br><br>というわけで、<br>せっかくリストが公開されているので、<br>使いやすく変更してしまいましょう。<br><br><font color="#008800">■SPRITE用カラーパレットが変更および保存できない</font><br>→パレットデータは、BG用とSPRITE用のリソースを分け、<br>　編集・保存・読み込みが別々にできるようにします。<br><br><font color="#008800">■パレット変更が上画面のキャラクターに即座に反映されない</font><br>→パレットを編集しても実物大でチェックできないのは不便なので、<br>　上画面にもリアルタイムに反映されるようにします。<br><br><font color="#008800">■その他</font><br>→ページ切り替え忘れなど、バグと思わしき場所を修正します。<br><br><br></div><hr><div><br><br>そんな感じで修正したのが以下の箇所になります。<br><br>公式サイトの"CHRED2"への修正は終わっていることを前提として、<br>赤字が新規追加部分、青字が修正部分です。<br><br><br><br>BGとSPRITEのパレットを別に扱うための準備。<br>色バンク名の文字列を定義する。<br></div><br><table border="1"><tbody><tr><td>13 DIM CBANK(2),CBMAX(2),CSTR$(2)<font color="RED"><b>,CBK$(2)</b></font><br>16 DATA "BGU",4<font color="RED"><b>,"BG"</b></font><br>17 DATA "SPU",8<font color="RED"><b>,"SP"</b></font><br>19 READ CSTR$(I),CBMAX(I)<font color="RED"><b>,CBK$(I)</b></font><br></td></tr></tbody></table><br><br>BGモードとSPRITEモードを切り替えた際に<br>パレットも切り替えて画面に反映する。<br>３行をコメントアウトすることでRETURNをスルーし、<br>モードを切り替えるたびに@SETCOLORするように。<br><br><table border="1"><tbody><tr><td>577 <font color="RED"><b>'</b></font>IF SBIX&gt;9 GOTO @SETCOLOR<br>578 <font color="RED"><b>'</b></font>GOSUB @CHRALL<br>579 <font color="RED"><b>'</b></font>RETURN<br></td></tr></tbody></table><br><br>ページ切り替え忘れ修正。<br><br><table border="1"><tbody><tr><td>586 C$=""<font color="RED"><b>:BGPAGE 0:SPPAGE 0</b></font><br></td></tr></tbody></table><br><br>下画面のエディタには必ずBG用パレットが読み込まれていたので、<br>SPRITEモードの場合はSPRITE用パレットを読むように修正。<br><br><table border="1"><tbody><tr><td>587 COLREAD(<font color="blue"><b>CBK$(CTYPE)</b></font>,P),RGB(0),RGB(1),RGB(2)<br></td></tr></tbody></table><br><br><br>上画面にもリアルタイムにパレットを反映させるために、<br>GRP面（上画面のキャラはここに描いている）のページも<br>切り替えるように修正と、SPRITE対応。<br><br><table border="1"><tbody><tr><td>603 SPPAGE 0:BGPAGE 0<font color="RED"><b>:GPAGE 0</b></font><br>604 COLSET <font color="blue"><b>CBK$(CTYPE)</b></font>,P,C$<br>606 SPPAGE 1:BGPAGE 1<font color="RED"><b>:GPAGE 1</b></font><br></td></tr></tbody></table><br><br>BG用パレットとSPRITE用パレットを<br>別々に保存・読み込みができるように修正。<br>現在のモードのデータを保存・読み込みする。<br>ちなみに、COL0はBG用、COL1はSPRITE用。<br><br><table border="1"><tbody><tr><td>669 <font color="blue"><b>PRINT</b></font>"ヨミコムナマエ(COL<font color="blue"><b>";CTYPE;"</b></font>):";<font color="blue"><b>:INPUT </b></font>K$<br>670 K$="COL<font color="RED"><b>"+CHR$(CTYPE+48)+"</b></font>:"+K$:PRINT K$<br>679 <font color="blue"><b>PRINT</b></font>"ホゾンスルナマエ(COL<font color="blue"><b>";CTYPE;</b></font>"):";<font color="blue"><b>:INPUT </b></font>K$<br>680 K$="COL<font color="RED"><b>"+CHR$(CTYPE+48)+"</b></font>:"+K$:PRINT K$<br>681 <font color="RED"><b>BGPAGE 0:SPPAGE 0:</b></font>SAVE K$<br></td></tr></tbody></table><br><br><hr><div><br>ソースを解析しながら修正したので、<br>あまり自信はないです。<br>不具合がある可能性はおおいにあります(^_^;)<br>バグ等を見つけた方はぜひコメントください。<br><br>それにしても、プチコン、楽しいです！<br><br>3DSがDSiWareに対応するのは5月とのことですが、<br>DSi/LLをお持ちの方で、<br>昔BASICを触っていたような方は、<br>ぜひダウンロードしてみてください！<br></div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973701.html</link>
<pubDate>Tue, 22 Mar 2011 00:00:00 +0900</pubDate>
</item>
<item>
<title>SRを触ってみて</title>
<description>
<![CDATA[ お久しぶりです。<br><br>最低でも月イチくらいは更新しようと思っていたのですが、<br>こんなにギリギリになってしまいました。<br><br>前回のブログにも書いたとおり、<br>少しだけPC-6001mkIISR/6601SRに触ってみました。<br>（エミュですが）<br><br>それほど深く掘り下げたわけでもなく、<br>ほんの2ヶ月触っただけの感想なのですが…<br><br><font size="+2"><b>バランスが悪い</b></font><br><br>これにつきると思います。<br><br><br>mkIIに比べて、処理は格段に速いです。<br>グラフィックも強化されています。<br>しかし、メモリはそのままです。<br><br>画面の解像度が上がって<br>1画面あたりに必要なメモリも増えたため、<br>ページ数の指定もできなくなりました。<br><br>スムーズスクロール機能はありますが、<br>スプライトがないので、<br>ゲームにはなかなか使えません。<br><br>一つ一つはとても優れています。<br>ただ、何をしようと思っても、<br>あと一歩、足りないのです。<br><br>もし、メモリが2倍載っていたら。<br>もし、スプライト機能があったら。<br>もし、PCGが使えたら。<br><br>素晴らしいマルチメディアマシンになったと思いますし、<br>P6シリーズの寿命も、<br>もう少し延びたかもしれません。<br><br>本当に残念なマシンです。<br><br><br><br>というわけで、<br>大々的に発表できる何かを作ったというわけではないのですが、<br>ここ2ヶ月で、遊びで作ったいくつかのものを<br>まとめて載せてみようかと思います。<br><br><hr><br><div><br><b>イースのタイトル画面 SR版</b><br><br><img src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/89/bd/p/o0320020014557423447.png" alt="イメージ 1" class="popup_img_320_200" width="320" height="200"><br><br><br>キレイです。<br><br>すばらしくキレイです。<br><br>mkIIと同じ15色ですが、<br>解像度が上がるだけでここまで変わるとは。<br><br>この解像度であれば、<br>タイリングも目立たないので積極的に使えます。<br><img src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/d5/38/p/o0400030014557423457.png" alt="イメージ 2" class="popup_img_400_300" width="400" height="300"><br><br><br>ただし、1画面のデータ量も2倍になっているので、<br>この1枚のタイトル画面を出すだけで<br>メモリはパンパンになってしまいました。<br><br>PC-6601SRのディスク版ならともかく、<br>PC-6001mkIISRでオンメモリのゲームを作るのは大変そうです…。<br><br><br>ちなみにmkII版イースのタイトルです。<br><br><img src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/fc/7e/g/o0320020014557423471.gif" alt="イメージ 3" class="popup_img_320_200" width="320" height="200"><br><br>比べてみると、<br>やはりSR版のほうが段違いにキレイですね。<br><br></div><hr><br><div><br><b>ソーサリアンのタイトル画面 SR版</b><br><br><img src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/0f/a9/p/o0320020014557423478.png" alt="イメージ 4" class="popup_img_320_200" width="320" height="200"><br><br><br>決してソーサリアンをSRに移植しようなどと<br>思ったわけではありません。<br><br>タイトル画面を出してみたかっただけです。<br><br>ただ、FM音源でサウンドを鳴らして、<br>星を動かしたら、<br>きっと良い感じになるでしょうねー…。<br><br>ちなみに、mkII版も作ってみました。<br><br><img src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/fb/67/p/o0320020014557423496.png" alt="イメージ 5" class="popup_img_320_200" width="320" height="200"><br><br><br>あれ…<br><br>意外と…いいんじゃない？<br><br>むしろこっちのほうが味があってP6っぽいような…。<br><br></div><hr><br><div><br><b>スーパーマリオっぽいもの SR版</b><br><br><a href="http://twitvideo.jp/039Th" target="_blank"><br><img src="https://stat.ameba.jp/user_images/20190829/14/tiny-yarou/5c/9d/p/o0640040014557423503.png" alt="イメージ 6" class="popup_img_640_400" width="560" height="350"><br><b>（クリックで動画のリンクへ）</b></a><br><br>スムーズスクロールと<br>グラフィック表示部分のプログラムを<br>マシン語で書いて、<br>SRから追加されたっぽいVSync割り込みで<br>制御してみました。<br><br>VRAMへのアクセス方法がmkIIから一新したため、<br>PUTルーチンを全て作り直すことになったり、<br>スクロールによって移動するVRAMのアドレス解決に苦労したり、<br>個人的にはかなり苦労して作ってみたのですが、<br>結局、速度的＆メモリ的に<br>ゲームとして組み立てるのは厳しそうです。<br><br>というわけで、<br>残念ながらここでギブアップ。<br><br>そして…<br><br>SRを触ってみることも、<br>ひとまずここまでにしようかと思います。<br><br>もう少し勉強してから、<br>またいつか出直してきます。<br><br>SRで何かを作るなら、<br>せめてFM音源くらいは触れるようにならないとなあ…。<br>全然知らないんだよなあ…。<br><br>それでは。</div>
]]>
</description>
<link>https://ameblo.jp/tiny-yarou/entry-12513973696.html</link>
<pubDate>Tue, 30 Nov 2010 14:16:33 +0900</pubDate>
</item>
</channel>
</rss>
