手描きの線をそのまま使うゲーム：描き味を残す取り込み方

「描き味」を観察できる言葉にする

「味がある」「ない」のままでは比較できません。最初に、見る観点を三つに絞ります。

• 太さのむら：一本の線の中で、太い部分と細い部分があるか。
• 端の揺れとかすれ：線の縁がなめらかすぎず、ペンのかすれや紙の凹凸が見えるか。
• 紙の気配：背景の色むらや影が、意図せず残っていないか。残っていて邪魔か、それとも魅力か。

それぞれを1〜5点で採点します。5点は「紙で見たときと同じ印象」です。観点を先に決めておくのは、実験の途中で基準が動くのを防ぐためです。「いい感じ」という全体印象は、最後の感想欄にだけ書きます。

準備するもの

• 白い紙と、太さの違う黒いペン2本（例：細字と太字）。
• 撮影用のスマートフォンかスキャナ。
• ブラウザと、メモ帳などのテキストエディタ。
• 手描きの題材。同じ絵を3枚描きます。ここでは「小さな家と煙突の煙」のように、線の本数が少なく、かすれが出やすいものがおすすめです。

撮影は、窓際の明るい場所で紙の真上から行います。影が入ると、後の二値化（明るさで黒と白に振り分ける処理）で線と区別がつかなくなります。三枚を同じ位置で重ねて撮れるよう、紙の四隅に小さな十字を描き、台に紙をテープで留めておきます。この十字は、後で3枚の位置を合わせるときの目印になります。

撮影した画像は、ゲームの表示サイズの2倍程度に縮小して保存します。スマホ写真をそのまま使うと容量が大きくなりすぎるためです。アソバースへアップロードする場合は全体で20MiB以内という制限もあるため、この段階で小さくしておくと後で困りません。

実験1：取り込み条件を一つずつ変えて比べる

問い：背景を透過するときの「しきい値」を変えると、描き味の三観点はどう動くか。

条件：まず1枚の絵を使い、次の4条件を用意します。

• 条件A：撮影した写真をそのまま表示（透過なし）。
• 条件B1：しきい値を低めにして透過。
• 条件B2：しきい値を中くらいにして透過。
• 条件B3：しきい値を高めにして透過。

しきい値とは、画素の明るさがこの値より暗ければ「線」とみなし、明るければ透明にする境目の数値です。低すぎるとかすれた細い線が消え、高すぎると紙の影まで線として残ります。数値の具体的な良し悪しは、絵と撮影条件で変わるため、ここでは決めません。

記録の取り方：条件ごとに、三観点を1〜5点で採点します。表示は等倍と、ゲームで使う想定の縮小サイズの2通りで見ます。1条件につき計2回の採点になります。

• A、表示：等倍、太さのむら：、端の揺れ・かすれ：、紙の気配：、メモ：
• A、表示：縮小、太さのむら：、端の揺れ・かすれ：、紙の気配：、メモ：
• B1〜B3、表示：等倍／縮小、太さのむら：、端の揺れ・かすれ：、紙の気配：、メモ：

盲検にする工夫：自分で採点すると、期待が点数に混ざります。条件名を隠した画像を並べ、誰かに「紙の原画に近い順」に並べてもらうと、より偏りの少ない比較になります。協力者がいない場合は、日を置いてから条件名を見ずに採点し直し、最初の採点と照らします。

実験2：同じ絵を描き直して切り替える

問い：同じ絵を2〜3枚描き直して順に切り替えると、描き味は強まるか、それとも落ち着かなさが勝つか。

アニメーションの世界では、線がゆらゆら動いて見える手法が知られています。ここでは、その効果を自分の絵で確かめます。下のコードは、複数の画像ファイルを選ぶと、それぞれを同じしきい値で透過処理し、指定の間隔で順に切り替えて表示します。外部ライブラリは使わず、HTMLファイル1つで動きます。保存して、ブラウザで開いてください。

<!doctype html>
<meta charset="utf-8">
<input type="file" id="f" accept="image/*" multiple>
<label>しきい値 <input type="range" id="t" min="60" max="240" value="150"></label>
<label>間隔(ms) <input type="range" id="r" min="80" max="600" value="200"></label>
<canvas id="c" width="320" height="320" style="background:#f6f1e4;display:block"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');
const T=document.getElementById('t'),R=document.getElementById('r');
let imgs=[],frames=[],n=0,last=0;
function build(){
  frames=imgs.map(im=>{
    const o=document.createElement('canvas');o.width=o.height=320;
    const g=o.getContext('2d'),s=Math.min(320/im.width,320/im.height);
    g.drawImage(im,0,0,im.width*s,im.height*s);
    const d=g.getImageData(0,0,320,320),p=d.data;
    for(let k=0;k<p.length;k+=4){
      const v=(p[k]+p[k+1]+p[k+2])/3;
      p[k]=p[k+1]=p[k+2]=30;
      p[k+3]=v<+T.value?255:0;
    }
    g.putImageData(d,0,0);return o;
  });
}
document.getElementById('f').onchange=e=>{
  imgs=[];const files=[...e.target.files];let done=0;
  files.forEach((fl,j)=>{const im=new Image();
    im.onload=()=>{imgs[j]=im;if(++done==files.length)build();};
    im.src=URL.createObjectURL(fl);});
};
T.oninput=build;
function loop(t){
  if(frames.length&&t-last>+R.value){n=(n+1)%frames.length;last=t;}
  x.clearRect(0,0,320,320);
  if(frames.length)x.drawImage(frames[n],0,0);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>

条件：枚数（1枚、2枚、3枚）と切り替え間隔（短め、中くらい、長め）を組み合わせます。9通りすべてを一度に見るのは大変なので、まず枚数だけを変えて間隔を固定し、次に枚数を決めて間隔だけを変える、というように変数を一つずつ動かします。

記録の取り方：各条件を10秒ほど眺めて、次の三つを記録します。

1. 線が「生きている」と感じるか（1〜5点）。
2. 目が疲れる、または落ち着かないか（1〜5点）。
3. 本来の絵の形が崩れて見えないか（はい／いいえ）。

同じ条件を、時間を置いて2回採点します。1回目と2回目で大きく食い違う条件は、判断材料として弱いと考えます。

結果の読み方

採点表ができたら、次のように読みます。

• 条件Aの「紙の気配」だけが高く、他が低ければ、写真の質感は魅力でも、キャラクターを置く用途には背景が邪魔になる可能性があります。背景の色をゲーム側の紙色に合わせる方法も検討できます。
• B1〜B3のうち、縮小表示で「端の揺れ・かすれ」の点が落ちる条件があれば、縮小でかすれが潰れています。保存前の縮小サイズを大きくするか、ペンを一段太くして描き直します。
• 枚数を増やすと「生きている」は上がるが「落ち着かなさ」も同時に上がる場合は、間隔を長くして両方の点が釣り合う位置を探します。
• 「形が崩れて見える」が「はい」になる条件は、枚数の問題よりも、3枚の位置ずれが原因かもしれません。十字の目印で位置を合わせ直してから再度見ます。

判断の目安は、表のどこかの条件が全体で突出して高くなることではなく、「自分のゲームの用途で、許せる粗さの範囲」が見つかることです。背景に置く草と、主人公では、許せる揺れの量が違って当然です。

起こりやすい誤り

• 影を線と取り違える：撮影時の影が二値化で黒く残ります。撮り直すか、しきい値を下げます。
• 条件を同時に動かす：しきい値と間隔を一緒に変えると、どちらが効いたのか分からなくなります。一度に動かすのは一つです。
• 見た目の揺れと当たり判定を一緒にする：手描きの線は揺れていても、当たり判定は単純な四角や円で別に持つほうが、遊びやすさは安定します。見た目と判定は別物として扱ってください。
• 拡大で粗く見える：ゲーム画面の拡大を想定せず、小さく保存しすぎると、全画面で線の輪郭がぼやけます。実験1の「縮小」だけでなく、「拡大」も1回は確認します。
• 自分の目が慣れる：長く見ているほど粗さに慣れて点数が甘くなります。採点は一度に何条件も続けず、休憩をはさみます。

次の行動

まず、細字と太字で同じ小さな絵を3枚描き、コードを保存して条件B1〜B3の採点表を埋めてみてください。いちばん「紙の印象に近い」条件が見つかったら、その設定でゲームの素材を書き出します。アソバースに投稿するときは、直下のindex.htmlから相対パスで画像を読み込む構成にし、全体を20MiB以内に収めてください。