TSUMIKI
Build a World. Learn English.
世界をつくって、英語を学ぶ
Overview
概要Tsumiki (つみき — building blocks) is a voxel world built for a Japanese eight-year-old who loves Minecraft and is learning American English. The design premise is one sentence: the world is not decorated with English, the world is the English. Every block is tied to exactly one vocabulary word, and hitting it says that word out loud.
Tsumiki（つみき）は、Minecraftが大好きでアメリカ英語を学んでいる日本の8歳の子のために作ったボクセルの世界です。設計の前提は一文に尽きます。「英語で飾られた世界ではなく、世界そのものが英語」。すべてのブロックが一つの英単語に対応していて、叩くとその単語を声に出して読み上げます。
Educational games usually bolt a lesson onto a game and hope the child tolerates the lesson to get at the game. That trade is visible to an eight-year-old within about ninety seconds. So nothing here is a lesson: break a block and it names itself in an American voice, throws the word across the middle of the screen with the Japanese under it, and follows with a short sentence using it. Break forty blocks in an afternoon and you have heard forty English nouns in context without anyone calling it study.
学習ゲームの多くは、ゲームに勉強をくっつけて、子どもがゲームのために勉強を我慢してくれることを期待します。8歳の子はその取引に90秒ほどで気づきます。そこでTsumikiには「勉強」の時間がありません。ブロックを壊すとアメリカ英語の声で名前を言い、画面の中央に英単語とその下に日本語を表示し、続けてその単語を使った短い文を読み上げます。午後のあいだに40個のブロックを壊せば、誰も勉強と呼ばないまま、40個の英語の名詞を文脈の中で聞いたことになります。
How it was built
開発The sentence engine is the part that took the real work. There are around 14,000 sentences, 100+ per word, and they are neither hand-written nor loosely generated. Each of the 125 words carries its own grammar — countable or not, its real plural, whether it takes an article — plus adjectives that are actually true of it, verbs you really do to it, and places you really find it. Sentence frames combine those, so the output is correct by construction: 'a sand' and 'two sheeps' cannot be built. Hearing a word in forty different frames teaches the word; hearing the same frame forty times only teaches the frame.
本当に手間がかかったのは例文エンジンです。例文は約14,000、1単語あたり100以上あり、手書きでも適当な自動生成でもありません。125の単語それぞれが、可算か不可算か、正しい複数形、冠詞を取るかといった文法情報と、その単語に本当に当てはまる形容詞、実際にする動作、実際にある場所を持っています。文の型がそれらを組み合わせるため、出力は構造上正しくなります。「a sand」や「two sheeps」は作れません。40通りの型で単語を聞けば単語が身につきますが、同じ型を40回聞いても身につくのは型だけです。
What it does
機能The crafting table does not take materials, it takes spelling. Click the scrambled letters in the right order and the block is yours to build with. The lamp, the gold and all nine colours are locked behind their own names — so the reason to spell is the reason she already has: she wants the glowing block.
作業台に必要なのは素材ではなく、つづりです。バラバラの文字を正しい順にクリックすると、そのブロックが手に入ります。ランプ、金、そして9色すべてのブロックは、それぞれの名前をつづらないと手に入りません。だからつづる理由は、本人が既に持っている理由と同じです。光るブロックがほしいのです。
She stands by the crafting table and asks for things — 'Bring me three flowers', 'Place five red blocks' — in a sentence pinned to the corner for as long as the job is open. Fetch quests are a thing a child will do forty times, which is forty readings of an English sentence. After her twelve written jobs she invents them forever, and every third one is a preposition: put a lamp ON the table, a flower UNDER it. A block world is the only medium where that can be checked rather than merely said.
作業台のそばに立ち、「花を3つ持ってきて」「赤いブロックを5つ置いて」と頼みごとをします。頼みごとの文は、終わるまで画面の隅に表示され続けます。おつかいは子どもが40回でも繰り返すもので、それは英文を40回読むことでもあります。用意した12の頼みごとが終わると、その後は無限に新しい頼みごとを作り、3回に1回は前置詞の課題です。テーブルの上（ON）にランプを、下（UNDER）に花を。言うだけでなく実際に確かめられるのは、ブロックの世界ならではです。
A companion who walks with her and runs everything the other way — Japanese in, English out — including a word-order puzzle for 'A RED FLOWER', because Japanese has no articles and no reason to expect one. Two approaches in three she simply talks: about the biome, the weather, the animal that just walked past.
一緒に歩く仲間で、すべてを逆向き、つまり日本語から英語へ出題します。「A RED FLOWER」の語順パズルもあります。日本語には冠詞がなく、冠詞を予想する理由がないからです。話しかけると3回に2回は、地形や天気、通りかかった動物について普通に会話します。
Scattered across the island, about one chunk in six. Each is a picture and four words, spoken aloud before they are readable. Get it right three times and the word earns a star.
島のあちこち、およそ6チャンクに1つの割合で置かれています。中身は絵と4つの単語で、文字を読めるようになる前に声で読み上げます。3回正解すると、その単語に星がつきます。
Stars are not a score. They buy carrots that tame animals, a saddle so one can be ridden, faster boots, longer reach, blocks without spelling them, fireworks, and a crown that Nina then actually wears.
星はスコアではありません。動物をなつかせるニンジン、乗るための鞍、速く走れるブーツ、遠くまで届く腕、つづらずにもらえるブロック、花火、そしてニナが実際にかぶる王冠と交換できます。
A wrong answer is removed from the choices and the right word is said again. No health, no monsters, no fall damage, no way to die. The worst outcome available is a swim.
間違えた答えは選択肢から消え、正しい単語がもう一度読み上げられます。体力もモンスターも落下ダメージもなく、死ぬことはありません。最悪でも泳ぐことになるだけです。
Chunks are generated from the seed as she walks toward them and dropped behind her — no edge, no grey wall. Seven biomes decide the ground and what grows on it, with huts, campfires, stone circles, ruins, and, rarely enough that finding one is an event, two white giants twenty blocks tall.
チャンクは歩いていく先でシード値から生成され、後ろでは破棄されます。端も灰色の壁もありません。7つのバイオームが地面と植物を決め、小屋、たき火、ストーンサークル、遺跡があり、見つけること自体が出来事になるほどまれに、高さ20ブロックの白い巨人が2体現れます。
Touch controls appear automatically. The left thumb is a floating stick that centres wherever it lands, so you never have to look at your hands. Break and place are deliberately separate buttons rather than tap-versus-hold — a coin flip between digging and building is the most annoying thing this game could do to a small pair of hands.
タッチ操作は自動で表示されます。左手の親指は、触れた場所を中心にする浮動スティックなので、手元を見る必要がありません。壊すと置くは、タップと長押しで分けず、あえて別のボタンにしています。掘るか建てるかが運次第になることほど、小さな手にとって腹立たしいことはないからです。
Under the hood
技術の詳細Sentences correct by construction構造上正しい例文
Each of the 125 words carries its own grammar — countable or not, its real plural, whether it takes an article — plus adjectives that are true of it, verbs you do to it and places you find it. Frames combine those into 100+ sentences per word, so 'a sand' and 'two sheeps' are not filtered out afterwards; they cannot be generated in the first place.
125の単語それぞれが、可算か不可算か、正しい複数形、冠詞を取るかという文法情報と、当てはまる形容詞、する動作、ある場所を持っています。文の型がそれらを組み合わせて1単語あたり100以上の例文を作るため、「a sand」や「two sheeps」は後から取り除くのではなく、そもそも生成されません。
A deterministic infinite island決定的な無限の島
Everything about a chunk is a pure function of its coordinates and the seed, which is what lets chunks be built in any order, thrown away and regenerated identically. Features straddling a boundary work because every chunk stamps the features of its whole 3×3 neighbourhood and keeps only the blocks landing inside itself. Only her edits are saved, so the file stays kilobytes.
チャンクの内容はすべて、座標とシード値だけで決まる純粋な関数です。そのため、どの順番で作っても、捨てて作り直しても、同じチャンクになります。境界をまたぐ地物がうまくいくのは、各チャンクが周囲3×3の地物をすべて描き込み、自分の内側に入るブロックだけを残すからです。保存するのは本人の変更だけなので、ファイルは数キロバイトです。
Water as a medium, not a surface表面ではなく、媒質としての水
The scene behind the water is sampled and refracted through the wave normal, the depth buffer says how far behind it is so colour is absorbed over distance, and foam appears wherever that distance goes to nothing — which is exactly where a shoreline is. Real planar reflections come from a mirror matrix, so land in the sea is genuinely upside down; ponds and waterfalls are off that plane and take a sky reflection instead of one belonging somewhere else.
水の向こうの景色を波の法線に沿って屈折させてサンプリングし、深度バッファから奥行きを求めて、距離に応じて色を吸収させます。その距離がゼロになる場所、つまり岸辺には泡が現れます。本物の平面反射は鏡像行列によるもので、海に映る陸地は実際に上下逆さまです。池や滝はその平面から外れているため、別の場所の景色ではなく空を映します。
Every asset drawn at bootすべての素材を起動時に描く
No image or audio files ship at all. Textures are painted in canvas 2D at 16×16 and uploaded as layers of an array texture, sounds are synthesised with Web Audio, and the voice is the browser's own synthesiser forced to en-US and slowed to 0.82 — at normal speed the consonant clusters that are the whole difficulty arrive as a single sound.
画像ファイルも音声ファイルも一切含まれていません。テクスチャはcanvas 2Dで16×16で描いて配列テクスチャのレイヤーとして読み込み、効果音はWeb Audioで合成し、声はブラウザ標準の音声合成をen-USに固定して0.82倍の速さにしています。通常の速さでは、難しさの核心である子音の連なりが一つの音になってしまうからです。
Stack
技術構成Plain ES5 JavaScript and WebGL 2 — no engine, no framework, no build step, no package manager and no asset files. Script order in index.html is the dependency graph. Every texture is drawn in code with canvas 2D at 16×16 and uploaded as layers of a 2D array texture, which is also where the menu wallpaper comes from; every sound is synthesised with the Web Audio API; the voice is the browser's own speech synthesiser, forced to en-US and slowed to 0.82 for single words, because the consonant clusters are the whole difficulty and at normal speed they arrive as one sound. The world is rendered into a buffer a few hundred pixels wide and blown up chunky by CSS, then run through a full pass: per-pixel sky from the view ray, per-vertex ambient occlusion, real planar water reflections via a mirror matrix, refraction and depth-sampled absorption through water, aerial perspective that hides both the island's edge and the chunks still being built, and a post chain of light shafts, two-pass bloom, ACES tonemap, unsharp mask, chromatic aberration and scanlines. Only her edits are saved — the generator is deterministic, so the island returns identical and the save file stays a few kilobytes however long she builds.
素のES5 JavaScriptとWebGL 2で作っています。エンジンもフレームワークも、ビルド工程もパッケージマネージャーも、素材ファイルもありません。index.htmlのスクリプトの順番がそのまま依存関係です。テクスチャはすべてcanvas 2Dで16×16のコードで描き、2D配列テクスチャのレイヤーとして読み込みます。メニューの壁紙もここから作っています。効果音はすべてWeb Audio APIで合成し、声はブラウザ標準の音声合成をen-USに固定して、単語の読み上げは0.82倍に落としています。子音の連なりこそが難しさの核心で、通常の速さでは一つの音に聞こえてしまうからです。世界は幅数百ピクセルのバッファに描画してCSSで粗く拡大し、さらに一連の処理を通します。視線から計算するピクセル単位の空、頂点単位のアンビエントオクルージョン、鏡像行列による本物の平面反射、水中の屈折と深度に応じた吸収、島の端や生成中のチャンクを隠す空気遠近法、そして光芒、2パスのブルーム、ACESトーンマッピング、アンシャープマスク、色収差、走査線の後処理です。保存するのは本人が手を加えた部分だけです。地形の生成は決定的なので島は毎回同じ形で戻り、どれだけ長く遊んでも保存ファイルは数キロバイトに収まります。
Where it is now
現状と今後Tsumiki is live and playable in a browser, and on an iPad it adds touch controls and runs full-screen from the home screen. It is finished in the sense that matters — it is being played by the person it was built for. The vocabulary is data, so more words and more of Nina's job types extend the same loop rather than needing new machinery.
Tsumikiは公開中で、ブラウザで遊べます。iPadではタッチ操作が加わり、ホーム画面から全画面で起動できます。大事な意味で完成しています。作った相手が実際に遊んでいるからです。語彙はデータなので、単語やニナの頼みごとの種類を増やしても、新しい仕組みは必要なく、同じ流れがそのまま広がります。
Every design decision here answers to one person who will tell you, instantly and without diplomacy, when something is boring. That is a far better specification than any pedagogy — the English has to survive contact with a child who came for the blocks.
すべての設計判断は、退屈なものを即座に、遠慮なく指摘する一人のために下しています。どんな教育理論よりも優れた仕様です。英語は、ブロック目当てでやって来た子どもとの出会いを乗り越えなければなりません。