1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 小学生からのJavaScript。文字を表示するクラスを作ってみよう!

小学生からのJavaScript。文字を表示するクラスを作ってみよう!

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

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

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

アル

うーん……


りこ

どうしたの?


アル

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


山田

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


アル

山田先生だー。わーい!


りこ

はやくやろうよ!

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

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

山田

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


りこ

どうやるの?


山田

「fillText」と「strokeText」の2つの方法があるべだけど、「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 ゴシック', 'MS Gothic', sans-serif";

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

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

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

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

text

 

りこ

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


山田

今から使っていくべよ。さらに今回は前回よりもっと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 ゴシック', '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ファイルからは、上の2つのファイルを呼び出す必要があります。

<!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/script2.js"></script>
</body>
</html>

こんにちは

まとめ

今回は文字を表示するためのクラスをつくりました。
これで好きな位置に好きなように文字を表示することができます。

が、まだまだ改善(かいぜん)点があります。長い文章を入力したとき、画面の外に文字がはみ出てしまったり、するのです。
次回、このクラスをもっと改善していきましょう。

山田

今回のプログラムで、文字の表示はできるようになったべけど、長い文を書いた時、画面から文がはみ出てしまうべ。


りこ

どうすればいいの?


山田

わだずは家に帰ってトムとジェリーを見たいから、つづきはまた次回にするべよ


アル

あ、ずるい!


山田

「いとしのジェリー」だべ


りこ

……まさか、食べ……


山田

次回を楽しみにするべよ!


アル

はーい!


りこ

はーい!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  2. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  3. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  4. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  5. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  6. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  7. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  8. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  9. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  10. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  11. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!
  12. 小学生からのJavaScript。クラスの概念をしっかりと理解しよう!
  13. 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!
  14. 小学生からのJavaScript。文字を表示するクラスを作ってみよう!
  15. 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

スポンサードリンク

関連コンテンツ

オススメ記事

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

おみくじゲームを作るべ!

小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!

小学生から始めるプログラミングシリーズです。 この講座ではScratch(スクラッチ)から少しレベルアップして、JavaScriptを使ってプログラミングを行なっていきます。 Scratc

コメントをどうぞ!

メールアドレスが公開されることはありません。