【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門

更新 : 2024/05/02

カテゴリー : JavaScript, プログラミング・Web

by : It is R

小学生からのJavaScript講座です。
このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。
シリーズの一覧はこちらをご覧ください。

さて、ゲーム作成で重要なキャラ移動などのプログラムはすでに完成しています。
でも、やっぱりRPGにはキャラクター同士の会話がほしいですよね！

そこで今回は、テキスト表示の方法を学んでいきましょう。

アル

うーん……

りこ

どうしたの？

アル

やっぱりゲームには会話が欲しいとおもってるんだけど、どうやるのかな

山田

じゃあ、今回は文字の表示について学んでいくべ！

りこ

山田先生だー。わーい！

アル

はやくやろうよ！

画面に文字を表示してみよう！
今回使うGameクラス
まとめ

画面に文字を表示してみよう！

まずは画面に文字を表示するところから始めてみましょう！

山田

まずは画面に文字を表示する方法だべ

りこ

どうやるの？

山田

「fillText」と「strokeText」の２つの方法があるべだけど、「strokeText」は文字のふちのみを表示するもので、ゲームにはあまり向いてないべ。そこで今回は「fillText」を紹介するべ！

'use strict';

//canvasの設定（せってい）
let canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 480;	//canvasの縦幅（たてはば）

//コンテキストを取得（しゅとく）
let ctx = canvas.getContext( '2d' );

ctx.fillStyle = "#000";
ctx.fillRect( 0, 0, 640, 480 );

//文字の設定
ctx.fillStyle = '#fff';
ctx.font = "24px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', 'MS Gothic', sans-serif";

//文字の表示
ctx.fillText( '山田ですだべ', 0, 24 );

このプログラムで文字表示に大切なのは、１４行目〜１９行目です。
１５行目のctx.fillStyle = '#fff';は、文字の色を指定しています。
#fffというのは、白という意味です。#000とすると黒になりますが、背景も黒いので見えません。

１６行目のctx.font = "24px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳゴシック', 'MS Gothic', sans-serif";は、フォントを指定しています。
手前に書いたフォントほど、優先順位が高くなります。優先順位が高いフォントがパソコンに見つからなければ、次のフォントを表示し、そのフォントが見つからなければ、また次のフォントを表示するというふうになります。

１９行目で、実際に文字を表示します。
後ろの数値は文字を表示する位置です。今回はx座標が0、y座標が24のところに、「山田ですだべ」と表示しています。

りこ

こうやって文字を表示するんだね。でも前回学んだクラスを使ってないよ

山田

今から使っていくべよ。さらに今回は前回よりもっとGameクラスに手を加えるべ

今回使うGameクラス

前回のゲームクラスでは、ループを自分で作る必要がありました。
今回はGameクラスの中にループを組み込んでみましょう。

今回はソースが長くなりますので、jsファイルを分けて作っていきたいと思います。
ではまずgame.jsファイルを以下のように作成しましょう。

game.js

'use strict';

//Gameクラス
class Game {
  constructor( width, height ) {
    this.objs = [];

    //もしもwidthやheight何も代入されていなければ、320を代入する
    this.width = width || 320;
    this.height = height || 320;

    this.canvas = document.getElementById( 'canvas' );
    //canvasの横幅とたて幅

    canvas.width = this.width;
    canvas.height = this.height;

    this.ctx = canvas.getContext( '2d' );
  }

  //start()を呼び出すことで、メインループが開始される。
  start() {
    this._main();
  }

  //メインループ
  _main() {
    //背景を黒く塗りつぶす
    this.ctx.fillStyle = "#000";
    this.ctx.fillRect( 0, 0, this.width, this.height );
		
    //ゲームに登場するものの数だけ繰り返す
    for (let i=0; i<this.objs.length; i++) {
      //ゲームに登場するもののクラスから、render()を呼び出す
      this.objs[i].render( this.ctx );
    }

    //_main()を呼び出す（ループさせる）
    requestAnimationFrame(this._main.bind(this));
  }

  //ゲームにテキストなどを表示するための関数
  add( obj, x, y ) {
    obj.x = x || 0;
    obj.y = y || 0;
    this.objs.push( obj );
  }
}

//Labelクラス
class Label {
  //Labelの初期設定
  constructor( label ) {
    this.label = label;
    this.font = "24px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', 'MS Gothic', sans-serif";
    this.color = '#fff';
    this.baseline = 'top';
  }

  //Labelを表示するための関数（メインループから呼び出される）
  render( ctx ) {
    ctx.fillStyle = this.color;
    ctx.font = this.font;
    ctx.textBaseline = this.baseline;
    ctx.fillText( this.label, this.x, this.y );
  }
}

山田

ゲーム全体に関することはGameクラスに、ラベルに関することはLabelクラスに書いていくべ

アル

それなら分かりやすいね

山田

でもここでいうGameクラスやLabelクラスは、いわゆるゲームエンジン。呼び出して使用できる形にしなくちゃいけないべよ

りこ

実際の会話を表示してしまうんじゃなくて、その会話を表示させるためのプログラムを作っておくってことね！

さらに、実際にゲームの内容を記述していくscript.jsファイルを作成します。

script.js

'use strict';

//ゲームのオブジェクトを640×480サイズで作る
let game = new Game( 640, 480 );

//ラベルオブジェクトを作る
let label = new Label( 'こんにちは' );

//add()を使って、ゲームにラベルを表示
game.add( label, 20, 40 );

//ゲームスタート
game.start();

山田

script.jsには実際のゲームの内容にかかわるプログラムを入れていくべよ

index.htmlファイルからは、上の２つのファイルを呼び出す必要があります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>text</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="js/game.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>