雑記

21-01　ファイルの読み込み（基本）

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

学習日

2026年2月10日

名前

樋口桜大

　今までは、文字やファイルなどのデータをプログラム内に直接書き込んでいました。　　　　　　　　　　　　　　もうそんなのは面倒くさい…と思っていると思うので、今回は文字を外部のファイルから読み込んで簡単にプログラムを作れるようにするための技術の一つとして覚えよう！！

まず準備をしよう！！！

　まずは、文字などを読み込むためのファイルを作ります。p5.jsでは左側の「＜」のマークの中でファイルを作ることができます。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ファイルを作ったら、名前をtext.txtにして、以下の文字を入れよう！

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

自分で作った図形（コードと画像）

✅ 例題 21-1-1

　ファイルを読み込むときには、loadStrings()の関数を使います。この関数を使うことで、ファイルの中のものを、各行を配列の要素として読み込みます。外部から読み込んだ文章を左上から順に表示してみよう！

コード

let textData;

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

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

  // 文字の設定
  fill(80, 160, 255);
  textSize(18);
  textAlign(LEFT, TOP);

  // 読み込んだテキストを表示
  // loadStrings()は配列を返すので、最初の行（0番目）を取得
  text(textData[0], 10, 10);
}

📷 実行結果

preload()関数について

　preload()の関数は、setup()関数の前に自動的に実行される特別な関数で、以下の特徴があります。

  • ファイルの読み込みには時間がかかる！？
  • preload() 内で読み込むと、読み込みが完了してから setup() が実行される。
  • これにより、ファイルが読み込まれていない状態でプログラムが動くことを防げる！

✅ 練習問題 21-1-1

　さっきのプログラムの内容を変更して、すべての行が描画されるようにしよう！　　　　　　　　　　　　追加で、文字サイズを４８にすること！

コード

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);
  
  for(let i = 0; i < 5; i++){
      text(textData[i], 10, i * 50);
  }
}

📷 実行結果

フォントファイルを読み込むことについて

　テキストファイルだけだとつまらない…。そこで、文字のフォントを変えるためにフォントファイルも外部ファイルとして読み込むことができるよ！

フォントファイルとは…？

　フォントファイルは、文字のデザイン（書体）を定義してあるファイルで、文字の見た目を変えることができるよ！！　　　　　　　　　　　　　　　　　　　　　例えば：

– ドットフォント（ピクセルアート風の文字）
– ゴシック体
– 明朝体

p5.jsでは、テキストファイルの時と似ていて、loadFont()の関数でフォントファイルを読み込めるよ！！！

✅ 例題 21-1-2

　ファイブフォントファイルを読み込んで、文字の見た目を変えてみよう！

コード

let currentFont;

function preload() {
  currentFont = loadFont("https://pg.pasocafe.jp/WebFonts/JF-Dot-MPlus12.ttf");
}

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

  // 読み込んだフォントデータを適用する
  textFont(currentFont);  

  // テキストを描画
  textSize(12);
  fill(80, 160, 255);
  textAlign(LEFT, TOP);
  text("ドットフォントに変更！", 10, 10);
}

📷 実行結果

✅ 練習問題 21-1-2

　さっきの例題を活かして、文字サイズ４８で、練習問題２１−１−１の文字をフォントを変えて描画してみよう！

コード

let currentFont;

function preload() {
  currentFont = loadFont("https://pg.pasocafe.jp/WebFonts/JF-Dot-MPlus12.ttf");
}

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

  textFont(currentFont);  

  textSize(48);
  fill(80, 160, 255);
  textAlign(LEFT, TOP);
  for(let i = 0; i < 5; i++){
      text(textData[i], 10, i * 50);
  }
}

📷 実行結果

まとめ・感想

・テキストファイルを外部から読み込むことで、ゲームでも文字を表示する時にとても便利にできることがわかった。

・テキストファイルだけでなく、フォントファイルによって、文字の書体を変えて、自分なりにアレンジすることができたので、自分でゲームの説明を作るときにも活用していきたいと思った。

コメントする