小学生からのJavaScript講座です。
このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。
シリーズの一覧はこちらをご覧ください。
さて、ゲーム作成で重要なキャラ移動などのプログラムはすでに完成しています。
でも、やっぱりRPGにはキャラクター同士の会話がほしいですよね！
そこで今回は、テキスト表示の方法を学んでいきましょう。
アル
うーん……
りこ
どうしたの？
アル
やっぱりゲームには会話が必要欲しいとおもってるんだけど、どうやるのかな
山田
じゃあ、今回は文字の表示について学んでいくべ！
アル
山田先生だー。わーい！
りこ
はやくやろうよ！
画面に文字を表示してみよう！
まずは画面に文字を表示するところから始めてみましょう！
山田
まずは画面に文字を表示する方法だべ
りこ
どうやるの？
山田
「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/script2.js"></script> </body> </html>
まとめ
今回は文字を表示するためのクラスをつくりました。
これで好きな位置に好きなように文字を表示することができます。
が、まだまだ改善（かいぜん）点があります。長い文章を入力したとき、画面の外に文字がはみ出てしまったり、するのです。
次回、このクラスをもっと改善していきましょう。
山田
今回のプログラムで、文字の表示はできるようになったべけど、長い文を書いた時、画面から文がはみ出てしまうべ。
りこ
どうすればいいの？
山田
わだずは家に帰ってトムとジェリーを見たいから、つづきはまた次回にするべよ
アル
あ、ずるい！
山田
「いとしのジェリー」だべ
りこ
……まさか、食べ……
山田
次回を楽しみにするべよ！
アル
はーい！
りこ
はーい！
この企画の一覧はこちら
- 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう！
- 小学生からのJavaScript入門。今月の残り日数を計算してみよう！
- 小学生からのJavaScript入門。画像の表示と移動をしてみよう！
- 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう！
- 小学生からのJavaScript入門。ファイルを分けて管理してみよう！
- 小学生からのJavaScript入門。オブジェクトを使ってみよう！
- 小学生からのJavaScript入門。ゲームのメインループを作ってみよう！
- 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす！
- 小学生からのJavaScript。HTML5とCanvasを使ってみよう！
- 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう！
- 小学生からのJavaScript。マップでキャラを動かせるようにしよう！
- 小学生からのJavaScript。クラスの概念をしっかりと理解しよう！
- 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう！
- 小学生からのJavaScript。文字を表示するクラスを作ってみよう！
- 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法！
