オープニング画面作成　（ゲームみたいなニュースサービスを作ってみる 9）

前回のおさらい

どうも、gokeです。
前回はニュースをためておくプログラムを作り、ユーザーの識別方法を決めました。今回はオープニング画面を作って実際にユーザーを識別するところまでやりたいと思います。

オープニング画面　王様のイラスト

ゲームのオープニング画面では大きく下記の２つを達成できればいいかなと思います。

・このゲームの目的の説明
・プレイヤーの情報登録

とりあえずミニマムで作るためにあまり凝らずに進めたいと思います。
RPGといえばお城の王様が旅立ちを命じてくるイメージがあるのでそんな感じでデザインしてみます。
とりあえずキャラクターとして王様が必要になりそうです。
ドラクエっぽくするために８ビットのドット絵を用意しようと思います。

A. 既存のものをどこかからもらってくる
B. 依頼して誰かに描いてもらう
C. 自分で描く

僕は絵を描くのが好きですが、そこに時間をかけたくないので可能な限りAかBにしたいのですが、自分のイメージの再現性とスピード感と難易度を考えると今回は描いちゃった方が良さそうです。ちょうどいいWebサービスがあったのでこのサイトで描いてみます。

こんなんだっけ？
という気がするのですが一旦これでよしとします。

オープニング画面　王様のセリフ

王様が色々説明してくれる流れにしたいので、ドラクエ風にメッセージが流れるJavaScriptをちょっと改造して自由度が高い構成にしようと思います。
具体的にはこんな感じにしてみました。（jQueryは3.4を利用）

<script>
var msg_index = -1;
var msg = ['よくぞ参った。伝説の賢者の血を引くものよ。', 'おぬしも知っているようにこの世界ではジョウホウが氾濫し、われわれ人間の手には追えなくなっておる。', 'そこで各国の王と相談し、伝説の賢者の血を引くものにジョウホウ統一の旅に出てもらうことなった。'];
$(window).bind('load',function(){
  next_message();
});

function push_message(tmp){
  if(tmp instanceof Array){
    for(i=0;i<tmp.length;i++){
      msg.push(tmp[i]);
    }
  }else{
    msg.push(tmp);
  }
}

function get_typing_message(msg){
  // 文字を１つずつ<span></span>で囲む
  output = "";
  msg.split('').forEach(function (c) {output += "<span>"+c+"</span>";});
  output += "<span> ▼</span>";
  $('.message-box-text').html(output);
  
  // 一文字ずつフェードインの時間をずらして表示
  $('.message-box-text').css({'opacity':1});
  var msg_num = $('.message-box-text').children().length;

  for (var i = 0; i < msg_num ; i++) {
    $('.message-box-text').children('span:eq('+i+')').delay(50*i).animate({'opacity':1},50);
  }
  setTimeout(function(){
    $('.message-box-text').children('span:eq('+(msg_num-1)+')').addClass('blinking');
  },(msg_num+5)*50);
}

function next_message(new_msg){
  if(new_msg)push_message(new_msg);//新しいメッセージが追加される場合
  if(msg_index==msg.length-1)return;//もうメッセージがないのに呼ばれたら終了
  msg_index++;
  var typing_message = get_typing_message(msg[msg_index]);//メッセージを装飾
  $('#message').html(typing_message);
}
</script>

msgという配列に表示したいメッセージが保存されており、next_message()という関数を呼び出すとメッセージが表示されます。
next_message()にパラメーターを与えるとメッセージを追加することができます。ちょっとごちゃごちゃしてますが一旦こんな感じかなと。

コラム：関数は20行まで
学生時代に大学の先生が
「全ての関数は20行以内にするといい」
とおっしゃっていたのをずっと意識しています。
全ての処理は動詞的に表現できるはずで、それらの動詞を関数にする。細かくすればするほど可読性が上がるしあとで直しやすいという意味合いです。
例としてカレーを作ることを関数で表現してみると、
function cook_curry()
とすることができますが、全ての処理をこの関数内につらつらと書いてしまうと読みにくいです。でもこの関数がこんな風になってたらどうでしょうか？
function cook_curry(){
    //具材を切る処理、パラメータに具材名と切り方
   cut(food_name, cutting_style);  
   //具材を炒める処理、パラメータに具材名と炒める時間
  fry(food_name, time);
   //具材を煮る処理  
   simmer(); 
}

function cut(food_name, cutting_style){
  wash(food_name);//具材を洗います
  put_on_cutting_board(food_name); //まな板の上に置きます
  switch (cutting_style){
    case 'mijin_giri':
    break;
    case 'hangetsu_giri':
   break;
  }
}
これだとぱっと見で何が行われているかわかります。
このコーディングスタイルはすごくいいと思います。（が、いまだになかなかうまくできません）

オープニング画面　登録してもらうところまで

キャラクターとプログラムを合わせてこんな感じに仕上げてみました。
この画面を表示するとメッセージがはじまり、興味があるニュースジャンルの選択と名前の入力で登録完了という流れです。

こんな感じです。gifアニメが少ししかアップできないので短いですがこんな雰囲気です。

まとめ

それっぽい感じになってきたので、次は戦闘画面を作っていきます。