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. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  17. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  18. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  21. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクターの画

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

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

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

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

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

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

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

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

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