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

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

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

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

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

アル

うーん……

りこ

どうしたの?

アル

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

山田

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

りこ

山田先生だー。わーい!

アル

はやくやろうよ!

目次
  1. 画面に文字を表示してみよう!
  2. 今回使うGameクラス
  3. まとめ

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

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

山田

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

りこ

どうやるの?

山田

「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. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  23. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  24. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

スポンサードリンク

関連コンテンツ

オススメ記事

【初心者向け】webpack入門。すぐに使える最も簡単な使い方

webpackは、複数のJavaScriptファイルをまとめてくれる、モジュールバンドラというものです。 今回は、webpack入門ということで、webpack5の使い方を紹介していきたいと思

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

【Git】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。 前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げ

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

wordpress

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

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

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です