CODE GALLERY No.23
ドットの絶景
上から見下ろすドット絵の世界で、村の人や動物が朝から夜まで暮らしています。上下左右に見回して、ただ眺めるためのページです。
北に崖のある高台、そこから落ちる滝と川、村の広場、畑と牧場、森、湖。それらが道でつながった小さな世界を、斜め上から見下ろす形で作りました。パン屋は朝から屋台に立ち、漁師は桟橋で糸をたらし、夕方になるとみんな家に帰って窓に明かりがともります。
時刻は、このページを開いたときの時計と同じところから始まります。季節も今の月に合わせてあります。カメラは見どころをゆっくり巡っていくので、まずはそのまま、しばらく眺めてみてください。
HOW TO USE眺め方
- カメラは村・滝・高台・畑・湖・森と、見どころを順にゆっくり巡ります。画面を上下左右にドラッグすると、好きな場所へ動かせます。「自動で巡る」をオフにすると止まります
- 人や動物を押すと、名前と、いましていることが下に出ます。カメラはその人を追いかけるので、家に帰るまでついていくこともできます
- 「場所」のボタンで、村・川・畑・森・湖・丘へ移れます。「季節」で春夏秋冬を、「時間」で時の進む速さを変えられます
- ふつうの速さだと、1時間がおよそ10秒、1日がおよそ4分です。「はやい」にすると、朝焼けから夜までを1分ほどで見られます
- 画面の上でドラッグすると景色が動くので、ページを上下に動かすときは画面の外を触ってください
THE WORLDこの世界のこと
- 村の広場：石だたみの広場に、パン屋と八百屋の屋台と井戸。まわりに家と宿屋が並びます。子どもたちが走り回り、ご隠居はベンチでひと休みします
- 川と滝：高台の崖から滝が落ち、川は2本の橋の下を通って湖へ注ぎます。夏の夜は川べりにホタルが飛びます
- 畑と牧場：風車が回り、農家が畑を耕します。牧場にはウシとヒツジ、納屋のまわりにはニワトリがいます
- 森：木こりの小屋があり、昼はシカやウサギ、夜はキツネとフクロウが出てきます
- 湖：桟橋で漁師が釣りをし、ボートや帆かけ船が行き来します。ときどき魚が跳ね、晴れた夜は湖面に星と月が映ります
- 見晴らしの丘：崖の石段を上った先の高台です。画家が景色を描き、夕方からは2人が崖のふちのベンチで村を見下ろしています。旅人は夜になると、ここでたき火をします
HOW IT WORKSしくみ
世界は8ドット四方のマスを横128×縦80枚並べた地図で、全体は1024×640ドットあります。画面に映るのはそのうち横256×縦160ドット（スマホでは176×160）で、それを拡大して表示しています。マスごとに「草・道・水・崖・橋」といった種類を持たせてあります。
見下ろしの奥行きは、描く順番で出しています。木や家、人や動物を、足もとの位置が画面の上にあるものから順に描きます。こうすると、家の裏に回った人は屋根に隠れ、木の手前を通る人は幹の前に重なって見えます。
朝焼けや夜の暗さは、景色を描き終えたあとで、時刻ごとの色を画面全体にうすく重ねて出しています。窓の明かりや街灯はそのあとに描くので、夜になっても暗くならず、ぽつぽつと光って見えます。
// 景色を描き終えたら、時刻の色を画面全体に重ねる
ctx.fillStyle = `rgba(${r},${g},${b},${a})`; // 夜は紺色、夕方はオレンジ
ctx.fillRect(0, 0, W, H);
// 明かりはそのあとで、光を足し合わせる描き方で重ねる
ctx.globalCompositeOperation = 'lighter';
人や動物は、1人ずつ家・起きる時刻・寝る時刻・仕事を持っています。行き先までの道すじは、マスの上で A*（エースター）という探し方を使って見つけます。道のマスは草のマスより歩きやすいとしてあるので、遠くへ行くときは自然と道を通り、川は橋を、崖は石段を使います。絵は「1文字が1ドット」の文字の並びで書いてあり、横向き・正面・背中の3つの向きを、髪や服の色を入れ替えて26人分に描き分けています。
NOTES注意
- 画面が見えていないときや、ほかのタブを開いているときは、動きを止めています
- 地図が広いので、画面の外にいる人は少し速く歩かせています。仕事場が遠い人も、時間どおりに着けるようにするためです
- 天気を「おまかせ」にしておくと、何時間かおきに晴れと雨（冬は雪）が入れ替わります。雨の日は、外に出ない人もいます
※ 景色はすべてブラウザの中で描いていて、画像ファイルは使っていません。