雑記

07-01 テキストファイルの読み込み

Posted on by minto818 / 0件のコメント

練習問題7-1-2

例題7-1-1 では、1行目だけを表示しました。
text.txt の すべての行 が画面に描画されるようにプログラムを変更しなさい。
また、文字サイズを 48 に変更してください。

let textData;

function preload() {
  textData = loadStrings("text.txt");
}

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);

  fill(80, 160, 255);
  textSize(48);
  textAlign(LEFT, TOP);

  // loadStrings() は配列を返すので、0番目の要素が1行目
  for(let i=0; i<textData.length; i++){
    text(textData[i], 10, i*48);
  }
}
６章に比べると、ややこしくなくて感覚で理解しやすくてよかったです。

練習問題7-1-3

プログラム側では、各行の先頭に 行番号（1, 2, 3…）を付けて表示しなさい。
文字サイズは 24、行間は 30px としてください。

let textData;

function preload() {
  textData = loadStrings("text.txt");
}

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);

  fill(80, 160, 255);
  textSize(24);
  textAlign(LEFT, TOP);

  // loadStrings() は配列を返すので、0番目の要素が1行目
  for(let i=0; i<textData.length; i++){
    text((i+1)+"."+textData[i], 10, i*30);
  }
}
配列と扱い方が変わらないので、今のところは簡単です。

練習問題7-1-4

RPG では、村の NPC に話しかけるとセリフが表示されます。
npc.txt にセリフを書いておき、クリックするたびにランダムで1つ表示 するプログラムを作りましょう。

let npcMessages;

function preload() {
  npcMessages = loadStrings("npc.txt")
}

function setup() {
  createCanvas(400, 300);
  background(247, 216, 165);
}

function mousePressed() {
  showMessage(20, 190, 360, 90)
}

function showMessage(x, y, w, h) {

  // 外枠
  fill(0);
  noStroke();
  rect(x - 2, y - 2, w + 4, h + 4);

  // 内枠
  fill(0);
  stroke(255);
  strokeWeight(2);
  rect(x, y, w, h, 5);

  // メッセージ表示
  fill(255);
  noStroke();
  textSize(16);
  textAlign(LEFT, TOP);
  text(npcMessages[Math.floor(random(npcMessages.length))],x+10, y+10)
}
手ごたえがあって、楽しかったです。

コメントする