目次１ホームページを作ろう I. ジオシティーズでホームページを開設 II. HTML の基本理解 III. Web ページ作成 IV. サブページ作成 V. CSS の基本理解 VI. CSS でレイアウト VII. ページデザイン VIII. CSS でテキストデザイン１はじめに２ゲ

(1)

1

秋課題レポート

～ゲームの完成に至るまで～

作成者：LIFE=RISK

(2)

2 目次

１、ホームページを作ろう

―I. ジオシティーズでホームページを開設

―II. HTMLの基本理解

―III. Webページ作成

―IV. サブページ作成

―V. CSSの基本理解

―VI. CSSでレイアウト

―VII. ページデザイン

―VIII. CSSでテキストデザイン１．はじめに

２．ゲーム作成の準備

－１ソフトの紹介

－２今回使用したもの

―３ゲーム下書きと始める前の必要なもの３．ゲーム作成

－１テーマの紹介（今回作成したもの）

－２ゲーム作成実行part1（シューティングゲーム）

２．１オープニング２．２プレイ画面２．３エンディング

―２ゲーム作成実行part2（クイズゲーム）

２．４オープニング２．５プレイ画面２．６エンディング

２．７保存方法（KoolMoves体験版における）

４おわりに参考文献

(3)

3 １、ホームページを作ろう

ここではホームページの作り方について参

考書HTML&CSSの本をもとに紹介してい

きます。作り方の順番としては

I. ジオシティーズでホームページを開設 II. HTMLの基本理解

III. Webページ作成 IV. サブページ作成 V. CSSの基本理解 VI. CSSでレイアウト VII.ページデザイン

VIII. CSSでテキストデザイン

という順序で進めていきます。

実際にやってみよう

～I. ジオシティーズでホームページを開設～

作成したホームページをネット上で閲覧するためには専用のソフト、Webブラウザ（作成したページを表示するためのソフト）を使用する必要があります。今回はジオシティーズを使ってホームページの開設、Ｗｅｂページの表示を行っていきます。

まず、YＡＨＯＯ!JAPANのトップページを開き、一覧ボタンを押します。そして、集まると言う項目の中にホームページのボタンがあるのでそこを押してください。そうするとジオシティーズのトップページが表示しされます。その際に[無料ホームページを開設する]というボタンを押す。（Yahoo! JAPAN IDでログインしていない場合、［Yahoo! JAPAN IDでログインする］ボタンを押し、表示されるログインページよりYahoo! JAPAN IDとパスワードを入力し、ログインする。［URLを決定すれば、ホームページ開設完了です！］というメッセージと、URL選択欄が表示されるので[www]をクリックし、希望のサブドメイン（サーバー名）を選択してくだい。

次に、URLを選択します。ページを開いた直後、ログイン中のYahoo! JAPAN IDが URLの一部として表示されているのでこのままYahoo! JAPAN IDをURLに使う場合、

変更は不要ですが、Yahoo!

JAPAN IDを使いたくない場

合、IDが表示された部分をクリックし、あなたが考えた、使いたいニックネームを選んでください。（別のニックネームを使いたい場合、 [ニックネームを追

Figure 1（作者）

(4)

4 加]をクリックするとニックネームを作成でき

るのであなたのお好みのニックネームを作成してください。）

URLを選択したら、利用規約とガイドラインの確認をよく読み承諾したうえで[無料ホームページを開設する]ボタンを押してください。（万が一不明、あるいはあなたにとって支障が出る場合は別のホームページソフトを利用することをお勧めします。）

「Yahoo!ジオシティーズへようこそ！あなたのホームページが開設されました」と表示されると、ホームページが開設されたことになります。また、使用しているYahoo!

JAPAN IDに登録されているメールアドレスへ、「Yahoo!ジオシティーズへようこそ！」

というメールが送られるのでそれを確認し、本当に開設されたかどうかを確かめてください。

ここまでがジオシティーズでのホームページ開設の仕方の簡単な手順になりますが、もし不明な点があれば［ジオシティーズ開設］と検索してみてください。

ここまでの手順が上手く済めば、新たに一覧からホームページを検索してみると先ほどとは別の画面が表示されます。この画面を閲覧することが出来ればホームページの開設は成功です。

II. HTMLの基本理解

ＨＴＭＬとはHTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。これを使用することでホームページに様々な情報を記載することが出来ます。

では、さっそくホームページを作っていきましょう

最初にメモ帳を起動します。このメモ帳にHTML要素を記入し、そのデータを先ほど開設したジオシティーズに移すとあなたのホームページにその情報が移り、あなた好みのホームページが作成されていきます。（メモ帳はスタートボタンからすべてのプログラム

(5)

5 を選択し、アクセサリーを探して起動してください。）

次に必要な情報を打ち込んでいきます。

ＨＴＭＬ文書の始まりを示すタグ、<html>を半角英数で打ち込んで行きます。（半角英数で打ち込まないとうまく起動しないので注意してください）。始まりがあればもちろん終わりを示すタグもあります。たいていの終了タグには初めに［/］が付きます。つまり、

今回は</html>ということになります。これでホームページに記載する情報の始まりと終わりが出来ました。

<html>の直後をクリックして、Enterキーを押し、（<html>の横に記入してもいいので

すが見やすいように下に沿って記載していきます。）、<head>を記入します。<head>とは文書自身に関する情報（タイトル、関連ページなど）を納めた部分であり、普通の文書でいえば表紙や文書管理票のようなものです。その後、改行をして、（Enterキーを押して）

</head>を打ち込んでください。

<html>の直後をクリックして、Enterキーを押し、<body>を記入する。Bodyは文書の

本文を示す部分です。改行をして</body>を打ち込みます。

<head>の直後をクリックして Enterキーを押し、<title>を入力します。ここではあなたのホームページにふさわしいタイトルを記述してください。ここでは私のホームページタイトル

［LIFE=RISK］が記載されています。改行をして</title>を記入します。

HTML文章にはいくつかの必要事項があります。

HTMLにはバージョンと言われるいくつかの種類があるためどのバージョンを使用するかを示すための宣言が必要になります。このことをDOCTYPE（ドックタイプ）宣言とも言います。これをメモ帳の1行目に記載します。ここではHTML5のDOCTYPE宣言を記述しています。<html>の直前に<!DOCTYPE html>を入力します。（スペースキーを押す際は必ず半角スペースで記入してください。そうしなければうまく起動しない原因となります。）

<head>の直後をクリックして文字コードを入力します。（文字コードにはいくつかの種類があります。これを正しく記入しないとWeb上で見た時文字が文字化けしてしまうので注意してください。）ここでの文字コードは<meta charset=”UTF-8”>とします。

［charset］とは、文字コードを指定するための属性（要素に情報を付加するもの）です。

（［meta］とはメタデータという情報を追加する要素で、今回は文字コードなどの情報を追加します。）

(6)

6

content="Life=Riskのサイトです">を記入してください。同様に［content= ］を任意で書き込んでください。

改行し、<meta name="keywords" content="論文,プロミラリング">を記入してください。

同じようにして" content=" "を書き換えてください。キーワードが複数存在している場合は［，］でつなぎます。

今まで作成したものを保存しましょう。そのために専用のフォルダを作成しなければなりません。そのために、エクスプローラを起動させてください。次にデスクトップを選択し、そこで新しいフォルダを選び、新たなフォルダの名前を記入してください。これで新たなフォルダの完成です。ここではそのフォルダの名前をを［ホームページ］とします。

ここで最初に戻ります。メモ帳の［ファイル］をクリックして［名前を付けて保存］を選択してください。次にデスクトップを選択して、ファイル名のところに［index.html］

と半角英数で入力します。次に［文字コード］の部分を［UTF-8］に変更してください。そして最後に保存ボタンをクリックすると保存かんりょうです。念のために保存が出来ているか確認はしておいてください。

これが正常に動くか確認するために先ほどのファイル［index.html］で右クリックし、［プログラムから開く］

を選択し、[Internet Explorer]を選んでください。まだ何も記入していな

いので白紙のページが現れますが現状ではそれが正常に作動している証拠なので心配しないでください。

ここまで説明したことですが、ジオシティーズで新規ファイルを選択するとここまでの作業がすでに作成されている状態になります。

III. Webページ作成

見出しを設定しましょう。

見出しとなる文章を自分なりに考え、それをh1タグで囲みます。また、見出しとなる者は作品によっては複数存在することもあるので早いものからh1,h2…のように番号を付

(7)

7 けていきます。ここでは［<h1>Life=Risk</h1>］などがその1例となります。

段落を設定しましょう。

文章には必ず段落が存在します。それを可能にするのがpタグです。これで文章を囲むことでその文章に段落がつきます。このタグに関してはhタグのように番号を付ける必要はありません。<p>MENU</p>などが例となります。

改行して文章を読みやすくしよう

長い文章を読みやすくするためしばしば改行が使われている。それを実行売るためには brタグを使用する必要がある。このタグを改行したい文章の最後に記入することによりその文章は改行されます。また、brタグは今までのように囲む必要がないため</br>と記入しないように気を付けてください。

箇条書きを設定しよう

箇条書きは並列な情報が続くときに使用されるものです。まず、箇条書きにする部分を決め、箇条書きの先頭となる部分の上にulタグを記入します。次に、箇条書きとなるそれぞれの文章をliタグで囲みます。最後に、ulタグで囲みます。

画像を埋め込もう

文章だけではわからない場合やデコレーションなどに画像はよく使われます。ここではネットやカメラなどで入手した写真や絵などをホームページに埋め込む方法を紹介します。画像を埋め込みたい場所にimgタグ、

［<img src="画像が保存されているファイル名" alt="画像が表示されていない場合に、画

像の代わりとして表示される文章">］を記入します。こうすることで記入した箇所にあなたの選んだ画像が映し出されます。この作業は何度でも可能なので複数の画像を使用したい場合は先述の作業を同じように行ってください。また、画像のサイズを変更したい場合

はwidthタグとheightタグを使用します。widthはは横幅をheightは縦幅を決めるための

ものです。今までの作業を実際にやってみると下のようになります。

Imgタグを使用する際にファイル名の箇所が少しややこしくなっています。ファイルが一つならそそまま１つのファイル名を書けばいいのですが、あるファイルの中にその画像のファイルが入っている場合、最初に、その画像のファイルを入れているも一つのファイルの名前をimgタグの最初に書き、次に［ / ］を打ち込んでから画像のファイル名を書いてください。そうしなければ、☒のような印が出てきます。これはうまく起動していないことを示しています。上手くいくと以下のようになります。

(8)

8 Figure 8（作者）

メモ帳上

しかし、これはまだネット上にはアップされていませんのでさっそくアップしましょう先ほどのジオシティーズを開き、［新規ファイル］を選択し、空ファイルを作成してください。そして、そのファイルを右クリックしてファイル編集を選択し、メモ帳に書かれた今までの文章をコピーしてそこに貼り付けて、最後に保存を押すとネットにアップされたことになります。

IV. サブページ作成

サブページ、つまり別のページを作ろう。ここでいうサブページとは自己紹介や近況などの、先ほど箇条書きで記述した１つ１つの専用のページのことである。

では、さっそく自己紹介のサブページを作っていきましょ。まず、メモ帳を開き、このページに書く内容を今まで伝えてきた技術を使い記載してみる。内容としては、自己紹介、名前、故郷、趣味を書いてみよう。ここで注意したいことは最初から書かないことである。何故ならば、今まで書いてきた文章が使えるからである。ここでいう使える部分とはbodyタグ内以外である。

つまり、新たなページを作る際には、今まで作成してきた文章をコピーし、それを新たなメモ帳などに貼り付け、不要な部分を削除する

ことで時間の短縮に繋がります。

次に、bodyタグ内を書き換えていきましょう。

先ほどの情報を記入しますが、今回は箇条書きではなく表を用いて作成していきます。

表を作ろう

表を作るために用いるタグのことをtableタグという。まず初めに<table></table>を記入し、

その間に今回の情報を記載していきます。次に、

類似単語を1列に並べるためにtrタグを用いま

Internet Explorer上 Figure 7（作者）

(9)

9 す。ここでは1列になるものを囲みます。表での見出しとなる者に thタグで囲みます。そして、その見出しの相手となる者をtdタグで囲みます。これらの過程の中でもし、表のためのタグを追加したい場合は先述のhタグなどを用いればきれいにできるだろう。そして、ジオシティーズで先ほどと同じようにからファイルを作成し

（ファイル名は任意）、ファイルの編集からファイルを開き、先ほどまで記述していた内

容をコピーしてここに貼り付けて下さい。（ジオシティーズの場合、ファイルを作るとすでにいくらかは必要事項が記入されているのでそこを削除するのを忘れないでください。）実際に作るとこのようになります。

メモ帳上 Internet Explorer上 Figure 10(作者）

Figure 12（作者） Figure 11（作者）

(10)

10 ページ同士を連携させよう。

先ほど作ったページをさっそく繋げてみましょう。この作業で用いるタグはaタグである。これにより別々のページ同士が繋がり、ホームページにより一層多くの情報記入などの作業がかのうになります。では実際にやってみましょう。先ほど作ったファイル（ジオシティーズ上）に直接記入していきます。先ほどのページはタイトル【自己紹介】のために作成したので、aタグをまず、箇条書きになっている自己紹介に用います。

<a herf=”繋げるファイル名”>を自己紹介の前に記入します。その後、</a>で閉じます。そのほかのタイトルも同様にして記載するとそれぞれのページが繋がります。ここで注意なのがファイル名を間違わないことです。間違いを気付かずに進めると後が大変になるので気を付けてください。

また、ここでは外部のサイトへのリンク、つまり、自分のページと他人のページを繋げることが可能ということです。先述と同じようにaタグでつなげたいページのURLを囲めばそこへ繋ぐことが出来ます。

また、メール送信用のリンクも設定が可能で、あなたのメールアドレスをaタグで囲むとあなたへメールが送られるようになります。ただし、迷惑メールなどが送られてくることもあるので、それが嫌な人は記載しないほうがいいかもしれません。

～V. CSSの基本理解～

ここでは背景色の決定や、テキストの設定、CSS ファイルを読み込むなどの作業を紹介していきます。これらの作業を行う前にCSSの基本を理解する必要があります。それがセレクタ、プロパティ、値、コメントである。

セレクタ：スタイルを適用する要素を指定するもので、これによりテキストの文字や背景色、

配置などの様々な変化が可能になります。スタイルはセレクタの直後に入力した｛｝の間に記述することになっています。また、セレクタには次のようなものがあります。

（タイプセレクタ）

タイプセレクタはbody やh1などHTMLの要素名そのものをセレクタとします。指定さ

(11)

11 れたスタイルはページの中にあるすべての同一要素に適用される。

（classセレクタ）

ClassセレクタはHTML側で付けたclass名を利用したセレクタで、class名はHTMＬの開

始タグの中にclass属性の値として記入します。CLASS名の前に「,」を付けたものをCLASS セレクタとなります。

（idセレクタ）

これはHTML側で付けたid名を利用したセレクタで、id名はHTMLの開始タグの中にid 属性の値として記述します。id名の前に「＃」を付けたものがidセレクタとなります。ただし、これは複数の要素に同じid名を付けるとうまく起動しないので注意してください。

（子孫セレクタ）

HTMLでは、ある要素の中に別の要素が含まれていることがあります。この関係を利用してある一つの要素の中のある要素といった記述が出来ます。

（複数セレクタ）

複数のセレクタに共通のスタイルを適用しようとする場合はセレクタとセレクタを「,」でつないで記載します。

プロパティ：スタイルをどのような種類にするのかを指定するもので、これはあらかじめ決められたプロパティの中から必要なものを選んでいきます。例を挙げると、font-size（テキストの大きさを変える）、background-color（背景色）、font-weight（文字の太さ）、font-style

（文字のスタイル）、text-decoration（文字の飾りの解除）などがあります。

値：実際のスタイルを指定します。値を記入する際に直前に「：」、直後に「；」を記入することを忘れないようにしてください。

コメント：これはホームページには直接は反映されませんが、ソースの記入の際に何かメモしておきたい場合にこれを使います。使い方としては直前に「/＊」、直後に「＊/」を記入します。これによりその部分はメモとして扱われます。

ではさっそくページの背景色を設定しましょう。メモ帳を開きはじめにセレクタ、

[ body｛｝ ]を入力します。そしてプロパティを｛｝の間に記入していきます。

今回は背景色なので[ background-color： ]を使用します。［：］の直後に色の値を入力します。色の値とは[#数字あるいは記号]で表されますが直接色の名前を打ち込んでも構いません。ここでいう色は赤、緑、青の組み合わせによって決まります。その記入方法としては

［＃］の次に先ほどの色の順番に数値を二桁ずつ入れていくと色が完成します。（不明な場合はホームページ背景色で検索すると参考ページが現れるのでそれをもとに作成してください。）その後、そのメモ帳を今までと同じように保存し、それを今まで作成してきたファイルに読み込ませます。その方法としては、</title>の直後で改行し、<link rel="stylesheet"

href="ファイル名" media="all">を打ち込むとページの背景が指定した色に変化します。

(12)

12 Figure 13（作者）

テキストの大きさや色を設定するには専用のプロパティを打ち込む必要があります。ここでは文字の大きさと色の変更を行います。文字の大きさを変えたい場合はその部分を

<font size= 数字>文字</font>で囲みます。そうすることでその箇所の文字の大きさは変

化します。文字の色を変更する場合は同じように<font color=色></font>で囲みます。そうするとその場所の文字の色は変化します。これらの作業が終わったら確認をしっかりと行って下さい。

～VI. CSSでレイアウト～

ページのレイアウトの際にそれぞれの箇所をグループに分けておきましょう。そうすることでホームページがより見やすいものになります。そのために、id属性またはclass属性で名前を付けます。これらのことをid名やclass名と呼びます。グループとしては［header］、

［menu］,［content］,［footer］,［container］があります。

［header］の箇所にはそのページの題名を記入するのが一般的である。記入の仕方としては以下のとおりである。index.html（今まで作成してきたもの）ファイルを開き、題名となる部分をdivタグで囲みます。ここで思い出してほしいのが［h1］タグである。題名の箇所はこのタグで囲まれているはずなので、この直前にdivタグ、<div id=”header”>を挿入します。そして、</h1>の後に</div>を記入します。こうすることでその場所は［header］グループとなります。

［menu］の場所にはそのページの項目、ナビゲーションメニューとなる文章を記入されています。方法としては先ほどと同じようにしていきます。箇条書きの始まりの<ul>の直前に div タグ、<div id=menu>を打ち込み、</ul>の直後に</div>を挿入します。これで

［menu］グループが完成しました。

［content］の箇所にはこのホームページの本文が記載されます。その始まりの箇所に今まで通りに記入していきます。直前に<div id=”content”>を記入し、ホームページの作者名の直後に</div>を挿入します。そうすることで［content］グループが作成されます。

(13)

13

［footer］は［header］とは逆の意味合いでホームページの最後を意味します。この部分にはホームページの作者名が記載されています。ここに同じようにして記入していきます。

直前に<div id=”footer”>を、先ほど挿入した</div>の直後に</div>を記載してください。

そうすればグループが完成します。（div タグが重なると思いますが気にせず進めてください）

そして最後に、すべてを一つのグループとする［container］を記入します。これは先ほど打ち込んだ<div id=”header”>の直前に記入します。次に</body>の直前に</div>を記入してください。そうすることで今までのものがグループとして完成します。

文章をより見やすく、ページをより良いものにするために幅と高さなどの配置を設定しましょう。

先ほど作成した背景色を決めるファイルを開き、［｝］の直後から記入していきます。

先ほどグループ分けをしましたので、それを利用して作業していきます。グループごとに幅や高さを変えるためにグループ名の前に＃を書きます。その後、｛を挿入し、次に幅や高さを決める値などを記入していきます。幅を指定するものが[width：],高さを決めるのが

［height：］で、この後に値（ここでの値はpx[ピクセル]となります。）を記入していきます。その後に｝を記入し完成です。

次にグループを左右に移動させましょう。先ほどと同じように移動させたいグループに

［＃グループ名｛］を付けて行います。その後、［float:］を記入し、その直後にrightあるいはleftを記入します。そうすることで指定されたグループは移動し、その後のグループは空いたスペースに移動していきます。また、この部分に［background-color：色］を記載するとそのグループの背景だけが変化します。最後に｝で囲むと完成です。実例を示すと次のようになります。

ここまでの作業を終えたら保存し、うまく起動しているか確認してください。

～VII. ページデザイン～

文字の後ろの背景に画像を設定しましょう。そのために先ほどのファイルを利用します。

(14)

14 設定したいグループ名の｛｝の中に[background-image:url（リンク先）]を記入します。

そうすることで指定した文字の背景に選択した画像が設定されています。

余白を設定しよう。文字や画像の周りには余白があることがあります。ここではその余白の作成の仕方を学びます。前述と同じように同ファイルを開き、余白を設定したいグループの｛｝に[padding-top: 数字px, padding-left:数字px, padding-right:数字px]を記入します。[-top:]はそのグループの上部につく余白を、[-left:]は左部につく余白を、[-right:]は右部につく余白を作成します。（PADDING とはテキストと枠線の間の余白を設定する。）こうすることでそれぞれの方向に余白が出来ます。また、ここでは箇条書きの余白の削除も設定できます。ここでは箇条書きのグループがMENUとなっているので[#menu ul]と記入し、後の｛｝の中に[ list-style-type: none; ]、[ margin:0px ],[ padding:0px ] をそれぞれ記入していくと余白がなくなります。

箇条書きの見た目を変えましょう。同ファイルに#menu ul{}を記載し、｛｝の中にlist-style-

type: ;を記入し、空白の部分にnone（マーカーなし）、disc（黒丸）, circle（白丸）、

square（黒四角）、などがあるのでお気に入りのものを選んでください。そうすることで独

特なもんが作れます。

設定した画像に枠線がついている場合があります。それを取り除きたい場合は img タグを用います。同じように同ファイルを開きimg{ }を記入していきます。{ }の中に[border-

style:]を挿入します。ここでは枠線を消すことなので［：］の次にnoneを打ち込みま

す。そうすることで画像の枠組みが消去されます。none以外にもsolid（実線）,double（２

本線）,groove（立体的にくぼんだ線）,ridge（立体的に隆起した線）,inset（全体がくぼんだ

ように表示される）,outset（全体が隆起したように表示される）,dashed（破線）,dotted（点線）などがあるので試してみてください。また、ここでは箇条書きに枠線などを付けることが出来ます。方法としては同ファイルに#menu li{}を記載します。そして｛｝の中にborder- style:, border-width: px, border-color:, background-color:, margin-top （right OR

left OR bottom）：値、 padding:上、右、下、左（ここでのPADDINGはこの順番で

値を入力します。）の余白などのものを任意で選択して挿入してください。そうすることで独特な箇条書きになります。

~VIII. CSSでテキストデザイン~

ページのそれぞれのリンク（項目）に変化を与えます。簡単に言うと、リンク先に未訪問の時、訪問済みの時、ポインターが乗っているとき、リンクをクリックしている時などにリンクに変化を与えます。そのタグとしては

未訪問時a:link{}（｛｝の中にcolor:値 ,text-decoration: 値）、訪問済み時 a:visited｛｝（｛｝の中にcolor:値 ,text-decoration: 値）、ポインターが乗っている時 a:hover｛｝（｛｝の中にcolor:値）

クリック時 a:active｛｝（｛｝の中にcolor:値）

などがあります。このほかにもポインターが乗ると書かれている文字が変わるタグもあり

(15)

15 ます。これらを先ほどの同ファイルの続きに書くことで起動します。そして、これらを行うことによりいっそうホームページに面白みが増します。

ページを整えましょう。そのためにまずはテキストと背景のバランスを調整しましょう。先ほどの続きに、調整したいグループを［#］の後に記載し、その後｛｝を挿入します。そして変更する内容を｛｝内に記入して言います。背景画像を指定する場合はbackground-image： url（リンク先）,背景画像の繰り返しを指定する場合はbackground-repeat: （例：no-repeat）、

背景画像の表示開始位置を指定する際はbackground-position:（例：left center）、このほかにも今までの作業で行った空白の作り方などをさらに加えてみるとよりいっそう見やすくなるかもしれません。また、画像を移動させたい場合はfloatタグ（float:方向）を使います。

このタグを｛｝に書くことによりその画像はその方向に寄せられ、後に続く要素を反対側に回り込ませます。その際にバランスが悪くなった場合はclearタグ（clear：方向）を使いま

す。floatタグのせいで崩れた場所にclearタグを打ち込みます。そうすることで崩れた場所

が整います。

最後にテキストを一方の方向に揃えたい場合は今までと同じように［#グループ名｛text-

align：（left,center,right）｝］を使います。こうすることでその個所は一方の方向に揃えられ

より見やすいホームページになります。

今まで紹介してきたことはホームページ作成の基本であり他にも様々な機能を付け加えることが出来るので色々作成してみてください。

ポインターが乗っていないときポインターが乗っているとき Figure 16（作者）

(16)

16 １．はじめに

今回は今まで習ってきたFlashプログラミングの技術を使用し（Flashプログラミング：

Topを参照）、クイズゲームとシューティングゲームを作っていきたいと思います。紹介の順番としては使用ソフトの紹介、ゲーム作成において事前にすべきこと、最初にシューティングゲーム（part1）のオープニング、プレイ画面、エンディングのそれぞれの作成の仕方、次に、クイズゲーム（part2）のオープニングからエンディングの作り方の説明をしていきます。

ここで注意してほしいのが、ここでは作者が独自に調べて紹介したものであり、必ずしも正解というわけではありません。仮に今回の説明で上手くいかなかった場合はお手数ですが個人でWebページを検索してあったものを使用してください。

２．ゲーム作成の準備

－１ソフトの紹介

今回のようにゲームを作成できるソフトは無料のものから有料のものまで幅広く存在します。例えとしては

KoolMoves

WOLF RPGエディター

J-RPGCreatorDX Queek

ロープレジェネレーター

引用元（無料でゲーム作成ができるツールのまとめ - NAVER まとめ）

などがあります。また、ここに挙げていないだけでゲームの作成ソフトウェアや作成方法などがWebページに数多く挙げられています。そこには作者（Webページの）の個性がちりばめられていますので自分に合った方法を見つけ、それを参考に自分だけのゲームを作ってみてください。また、ソフトウェアの種類によっては作成の方法や別のソフトウェアにはない機能などが備えられているのでよろしければ様々なソフトウェアを調べて、どれに、どんな機能があるのかを検索してみてください。そうすれば、あなたが作成したいゲームの作成の過程にあったソフトウェアが見つかるｋもしれません。

－２今回使用したもの

今回私が活用したものはFlash作成ソフトKoolMoves体験版です。これは一枚一枚に操作データなどの様々な情報を書き込むことで一つの動画、ゲームなどを作成することができます。では、これを使いクイズゲーム、シューティングゲームを作っていきます。

―３ゲーム下書きと始める前の必要なもの

(17)

17 何かを作る際には必ず下書きが必要です。その下書きが上手くいけばゲーム作成がスムーズになります。仮に、作成中に変更したいことがあれば、下書きにそのことを記入し、それが上手くいくかどうかを確認してみてください。このように、ゲームの下書きは様々な場面で活躍してくれます。下書きに書き方としては

どんなジャンルのゲームにするか

↓

実際に書くフレームごとの簡略図を描いてみる（どのような動きをさせるのか、どんな色彩にするのか、参考文献なども書いておく）

↓

イメージでいいのでどんなジャンルの音楽を加えるか書き込む

↓

考えたものと相違はないか確認する

また、ここでは始める前に下書きと同じようなものを完成させる為に必要な技術を記載している参考文献（Webページなど）を見つけ、また、自分に合ったソフトウェア、さらには音素材提供サイトなどを探すことをお勧めします。そうすることでより自分の下書きのゲームに近づけることができます。

３．ゲーム作成

－１テーマの紹介（今回作成したもの）

シューティングゲーム

ページ（キーフレーム）上に存在する物体にシューティングプログラムを打ち込むことでそこでシューティングゲームが行えるようにしていきます。また、その場面にあったサウンドを打ち込んでいきます。こうすることでその場に躍動感を与えることができます。さらに、文字や数字を加えることでよりゲームの完成度を高めていきます。

もし、あなたがシューティングゲームを作るならこの技術を利用してみてください。そうすればあなたのゲームがよりおもしろいものになる可能性が高くなると思います。

クイズゲーム

簡単な問題を作成し、正解と不正解で進む場所を変更させていくことで一つのゲームの流れを作成していきます。

ここからは同じ作業がいくつか登場するので後半になるにつれて説明（同じ物）が少し簡略化されていくので注意してください。

－２ゲーム作成実行part1（シューティングゲーム）

２．１オープニング

このオープニング場面では各キーフレームに少しずつ異なったものを作り、動画にした際

(18)

18 に、実際に動いているようにみせます。

Figure１５オープニング（作者） Figure１６オープニング（作者）

背景を決めるために四角形を画面（再生した時に見える部分）いっぱいに四角形の物体を作成し、それに色付けすることで背景を設定できます。その際に、画面上部にある「形状」を選択し、「重ね順」を選択することで他の図形が背景の後ろ（背景用の図形）に行くことを防ぎます。

図2の場面で一度ムービーを停止させ、プレーヤーが次に進むかどうかの選択を出来るようにします。

方法としては、

1. 「フレームアクション」を開く 2. 「＋」を選択

3. 「ムービーの停止」を選択この流れで停止設定を打ち込めます。

図2ではムービーの停止の他に次のページに行くボタンが作成されています。

ボタン作成方法

1. 「ツール」から「ボタン作成」を選択 2. 画面がボタン編集ページに変化

3. 「アップ」「オーバー」「ダウン」それぞれを作成する 4. 「⇧メインムービー」を選択し、元の画面に戻る 5. 作成したボタンを選択し、「ボタンアクション」を選択 6. 「＋」を選択し、「キーフレームに移動を」選択

このようにすることでゲームを開始するとはじめにオープニングムービーが流れ、その後、その動画が停止し、次のフレームに行くかどうかを決めてもらうことができます。また、ここには音楽も流れるように設定されていますがその方法はのちに記載しますのでそこを参考にしてください。

このように図形に動きを加え、さらに音楽も流すことでなかなかの雰囲気になるのでぜひやってみてください。きっといいものが作れるでしょう。

２．２プレイ画面

ここでは最初にアニメーション（ムービー）を作ります。そうすることで実際にゲームが

(19)

19 開始するまでの躍動感をプレーヤーに与えることができます。作成方法は前述に記載した方法でも、あるいは別の方法を探して作ってもかまいません。

Figure１７プレイ画面（作者）Figure１８プレイ画面（作者）Figure１９プレイ画面（作者）

Figure２０プレイ画面（作成者）Figure２１プレイ画面（作成者）Figure２２プレイ画面（作成者）

そして、メイン画面（実際にプレイヤーが遊ぶところ）で停止コマンドをフレームアクションに打ち込みます。そうすることでゲーム中に次のフレームから動き出すエンディングが勝手に始まることを防ぎます。（オープニングの説明を参考にすべし）ここではゲームの説明や始まる前の演出を行うことでゲームに対する興味をそそることができます。

Figure２３プレイ画面（作者）

メイン画面（操作できるようになる画面）にそれぞれ操作する図形（ここでは戦艦）と障害となる図形（ここでは隕石）、戦艦から発射される弾（ここでは隠れているがどんな形でも大丈夫です）をまずムビークッリプ（ツールからムービークリップ作成ボタンを選択し）をもとに作成し、それぞれの図形に最小に述べたシューティングコマンド（それぞれの図形のプロパティからアクションの＋を選択し、空白に）を打ち込んでいきます。

＊ムービークリップとはその図形自体に変化を与え、その図形のみが他の図形とは異なった動きをさせることができます。変化のさせ方としてはムービークリップ画面でアニメーション（その図形だけの）を作成すればメインムービーに変化を与えれます。

(20)

20

～戦艦～

onClipEvent(enterFrame) { _x = _root._xmouse;

_y = _root._ymouse;

}

【Flash(ActionScript)でゲーム作成入門 - ポンクソフトから引用】

これを打ち込むことで戦艦を動かすことができます。（この場合はマウスでの操作を可能に）

（キーによる操作を可能に）

on(load){atai=0;} //修正版 on(enterFrame){

if(Key.isDown(Key.UP) ){ this._y+=-5; } if(Key.isDown(Key.DOWN) ){ this._y+= 5; } if(Key.isDown(Key.RIGHT)){ this._x+= 5; } if(Key.isDown(Key.LEFT) ){ this._x+=-5; }

_parent.score.text=atai; //修正版 }

【Flashプログラミング：Topから引用】

～弾（クリックにより発射可能）～

onClipEvent(load) { _visible = false;

}

onClipEvent(load) はムービークリップが画面に読み込まれたときに実行されるアクション

です。

onClipEvent(enterFrame) { if (_visible) {

_x += 16;

if (_x > Stage.width) _visible = false;

} }

毎フレーム常に実行されるアクションです

onClipEvent(mouseDown) { if (!_visible) {

_x = _root.jiki_mc._x;

_y = _root.jiki_mc._y;

(21)

21 _visible = true;

} }

onClipEvent(mouseDown) はマウスが押下されたときに実行されるアクションです

（スペースキーにより発射可能）

on(load){ onAir=0; } on(enterFrame){

if( onAir==0 ){

this._x=_parent.jiki._x;

this._y=_parent.jiki._y;

if(Key.isDown(Key.SPACE)){ onAir=1; } }

if( onAir==1 ){

this._x+=3;

if(this._x > Stage.width){ onAir=0; } }

}

【Flashプログラミング：Topから引用】

～敵（惑星）～

onClipEvent(load) { speed = 8;

}

～敵（惑星）のスピードを設定するものです～

onClipEvent(enterFrame) { _x -= speed;

if (_x < 0) {

_x = Stage.width;

_y = Math.random() * Stage.height;

speed++;

｝ }

(22)

22 敵が画面から消えたら、ランダムに再び現れるようにするためにせっていします

あたり判定（これを打ち込むことで戦艦に弾が当たっているかどうか、また、その場合はどうするのかを設定します。）

onClipEvent(enterFrame) { _x -= speed;

if (_x < 0) { _rotation = 0;

_x = Stage.width;

_y = Math.random() * Stage.height;

speed++;

}

if (_rotation == 0) {

if (hitTest(_root.tama_mc) && _root.tama_mc._visible) { _rotation = 90;

_root.tama_mc._visible = false;

} else if (hitTest(_root.jiki_mc)) { _root.gotoAndPlay(1);

} } }

これらのコマンドをそれぞれのアクションスクリプトに打ち込むことでシューティングゲームを作成することができます。

ここでは打ち込むの説明が少ししか書いていませんので、もしもそのフレーズが気になる人がいるならば【Flash(ActionScript)でゲーム作成入門】をのぞいてみてください。そこには詳しい説明が乗っているのでそこを参考にしてください。

また、ここでのコマンドは一部であり、別のコマンドでも同じ、あるいはさらに高度なものもあるかもしれないので気になる方は検索してください。

２．３エンディング

(23)

23 Figure２４エンディング（作者）Figure２５エンディング（作者）Figure２６エンディング（作者）

ここではゲームが終わった後のアニメーションを作成します。私はHAPPYENDと

UNHAPPYENDの２つを作成しました。エンディングはそのゲームの締めとなるものな

のでそのゲームに合った終わり方をアニメーションにしたほうが好感を持たれるかもしれません。（今回は前者しか記していません。）ここでのHAPPYENDとUNHAPPYENDはボタン（次のキーフレームに移動のアクションを持つ）になっています。作成方法は前述を参考にしてください。また、最後のフレームに来たら一番始めのキーフレームに戻らないとプレーヤーが再びゲームをすることができないので戻るボタンを作成します（ここで

はrestartに最初のキーフレームに移動するというアクションが打ち込まれています）。

また、最後のフレームには作者の名前や参考文献などを記載しなければならないので注意してください。

音楽を図形、フレームに挿入していきましょう。

1. 様々なサイトから音楽、効果音などの音素材を集める（ただし、許可がされているもののみ、されていないものは最悪の場合犯罪になるので注意）

2. 選んだ音楽をダウンロードして、ファイルに保存

3. 図形（フレーム）のサウンドの編集を用いてダウンロードした音素材を挿入 4. 実際に聞こえるかどうか確認

5. 止める場合は図形（フレーム）のアクションのサウンド停止を選択

Figure２７スコア/タイムライン（作者）

上部にあるスコア/タイムライン（時計印）を利用することでフレームに対するアクションの記入が楽になるのでよければ利用してみてください。ここではキーフレームにどんなアクションが打ち込まれているのか、また、図形にどんなアクションが設定されているのかもわかりやすいので作業がより楽になるかもしれません。

ここまで作成して実際にそれが動くかどうかを動画再生で確認し、何も問題がなければそ

(24)

24 れを保存し、もしも、問題があればもう一度それぞれのキーフレームを確認し、そして、修正してください。もしも、問題の理由がわからない場合は前述を読み直すか、別の参考資料をのぞいてみてください。

保存方法

【ファイル】を選択 ↓

【ムービーのエクスポート】

↓

【SWFおよびHTMLとしてエクスポート】

↓

【SWFファイル】【ウェブページ】のファイルマークを選択 ↓

ファイル名を書き込む（アルファベットでないと保存できない可能性があります）

↓

確認後【ＯＫ】選択

ゲーム作成実行part2（クイズゲーム）

続いてクイズゲームです。これは、シューティングゲームのように作成した図形を動かすわけではないのでそれほど難しいわけではありません。このゲームの作成の流れを説明しますとそれぞれのページに問題と解答を作成し、そこに次のフレームに進めるようにボタンを作成します。ここでは解答がそのボタンになります。このボタン作成の方法は以下の説明の中で出てきますのでそこを参考にしてください。（あるいは前述に記載あり）

２．４オープニング

Figure２８オープニング（作者）Figure ２1オープニング（作者）

これはシューティングゲームの時と同じように、それぞれのフレームに少しずつ変化を付けていきます。（ここでは最初のフレームから少しずつ大きくなっています）

(25)

25 Figure３０ムービークリップ（作者）

また、ここでは図形（灰色の鬼？）をムービークリップ化しています。ムービークリップとは今までのように全体のフレームを少しずつ変化させるのではなく、その図形だけに変化を与えるものです。ここでは灰色の鬼が火を噴くように設定していますので気になる方は実際にプレイしてみてください。

やり方としては図形をムービークリップにするか、ムービークリップ作成ボタン（図16 より）を押してください。そうすると画面が変化しますのでそこで少しずつ変化させたフレームを作成してください。そして、それらにアクションよりループなどの様々な機能を挿入してください。そうすればメインムービーに戻り、動画を再生してください。そうすれば、変化させた図形のみが動くようになっているはずです。（変化していない場合は設定に誤りがあるか作者の説明不足かもしれませんので参考資料【Flashプログラミング：

Top】を調べてみてください。）

さらに、このページには音楽や背景の設定も差し込まれています。方法としてはサイトから好きな音楽をダウンロードして、それをサウンドに挿入してください。また、背景は画面いっぱいの図形に色彩を付け、更にその図形を【形状】メニューから重ね順を選択して、最背面に移動させてください。（詳しくは前述を参考にしてください）

これらのことを完成させますと図のようになります。オープニングはプレーヤーの興味などを掻き立てるものであればあるほどゲームの期待感を高めることができます。なので、

ここ（オープニング）ではゲームに関係した動画やゲームプレイ画面に繋がるように作成するとゲームの流れがスムーズになります。ゲーム上のそれぞれのパート（フレームを繋げた動画）がスムーズであればあるほどいいゲームであると使用者に感じさせられます。

これを目指して作成するといいでしょう。

２．５プレイ画面（それぞれの問題場面）

Figure３１プレイ画面（オープニング）作者Figure３２プレイ画面（オープニング）作者 Figure３３プレイ画面（オープニング）作者

(26)

26

Figure３４プレイ画面（オープニング）作者 Figure３５プレイ画面（オープニング）作者

ここではプレイ画面に行くまでのオープニングムービーを作成します。シューティングゲームの時と同じように少しずつ変化させていきます。（ここでは扉がだんだん大きくなり、

そして開くように作成しています）また、今までと同じように場面に合ったサウンドとアクションを落ち込んでいきます。（やり方が分からない場合は前述に記載した方法あるいは作者の参考資料を確認）ここでのアクションはサウンド再開とムービーの再開が記入されています。

Figure３６プレイ画面（作者） Figure３７プレイ画面（作者）Figure３８プレイ画面（作者）

問題文は【テキストの追加】によって作り上げます。この際に問題文を枠の上から現れるようにするなどの工夫を加えるとより面白くなります。

解答の文字はボタン化しています。理由としてはボタンにし、そこにアクションを付け加えることで正解なら次のページに、不正解なら別のページに行くように設定します。そうすることで正解するごとに別の問題が得てくるようになります。

ボタンは【ボタンの追加】を選択し、ボタンを作ります。また、そのボタンのアクションを選択し、その中から【キーフレームに進む】を選択してからどのページに移動するかを決めてください。そうすることで先ほど説明したクイズゲームの基本的流れが完成します。

また、今回作者が作成した骸骨（？）についても説明します。この図形はムービークリップ化しているため、他の図形とは別に変化し続けます。ムービークリップ化はムービークリップボタンを選択し、ムービークリップ化して作成の画面でその図形がどのように変化していくのかを設定します。その際にその図形だけに別のサウンドを組み込むこともできますので良ければ試してください。（方法は今までと同じだがムービークリップ作成の画面で組み込む必要があります）

問題ごとに音楽や背景、図形などを変えたりすることでクイズゲームのみならず様々な場面でいろいろな効果をプレーヤーに与えることができます。

さらに、問題のキーフレームにそれぞれアクション、【ムービー停止】を打ち込んでくださ

(27)

27 い。そうすることで次の問題が勝手に現れないようにします。（方法は前述あるいは参考資料を確認）

２．６エンディング

Figure３９エンディング（作者）Figure４０エンディング（作者）Figure４１エンディング（作者）

Figure４２エンディング（作者）Figure４３エンディング（作者）Figure４４エンディング（作者）

ここでは今まで作成してきたようにムービーを作成します。作成方法は前述と同じように図形を作成し、それを枠外から枠内へ移動させるように配置します。そうすることで、ムービー上で図形が移動しているように見えます。さらに、図形やフレームにサウンドを加えることでそのムービーによりいっそう躍動感を与えることができます。方法は図形やフレームの【サウンド】にWebからダウンロードした音素材を挿入してください。（詳しい方法は参考資料あるいは前述を確認）そうすることでムービーに音楽が付きます。

また、最後のページには最初に戻るためのボタン（restart）が作成されています。

作成方法は【ボタン作成】を選択し、ボタン設定のページに移動したらそこでボタンにさせたいことを打ち込む、あるいは変化させてください。（詳しくは前述あるいは参考資料を確認）

加えて最後のページに今回自分が集め、利用した参考資料、参考Web（ＵＲＬ）などを書き込んでください。これは他の著者などの作成物を利用した際に示さなければならないものなので必ず行ってください。また、このページにはアクションとして【ムービー停止】が打ち込まれています。そうすることで勝手に最初のキーフレームに移動することを防ぎます。

これでクイズゲームの作成は終了ですが、最後に確認のために一度動かしてみておかしな部分がないことを確認してください。そこで何も問題がないなら完成ですが何か問題がある場合は前述を読み直すか参考資料を確認してください。

２．７保存方法（KoolMoves体験版における）

(28)

28 前述の仮定を経てゲームが完成したならばそのゲームを保存します。その方法は

【ファイル】を選択 ↓

【ムービーのエクスポート】

↓

【SWFおよびHTMLとしてエクスポート】

↓

【SWFファイル】【ウェブページ】のファイルマークを選択 ↓

ファイル名を書き込む（アルファベットでないと保存できない可能性があります）

↓

確認後【ＯＫ】選択

この流れを必ず行ってください。そうしないとせっかく作成したゲームのデータが消えてしまうので注意してください。

さて、ゲーム作成の説明はこれで全てですが最後にここまで出てきたことをまとめたいと思います。

最初に下書きを作成します。この際に自分の考えを出来るだけ詳しく書き込んでください。そうすることで自分のゲーム作成に必要なものが分かります。次に、サウンドの素材集め（Webページをお気に入りに登録しておくと便利）、参考（ゲーム作成）にするための資料、ページを検索、収集する。その過程で使用するソフトウェアを見つけておく。その後、実際にソフトを起動させてゲームを作り上げていく。そこで、様々なアクション、

音楽、効果音などのあなたのゲームに必要な情報を挿入していきます。そして、全ての工程が終われば保存してWebサイトに投稿してください。そうすることで作成したゲームを他の人にもプレイしてもらうことができます。

４おわりに

・シューティングゲームのメイン画面（プレーヤーが実際にプレイするキーフレーム）に次に進まないようにコマンドを打ち込んで対策したつもりだったが、少しの間プレイしたら勝手に次に進んでしまうので残念だった。その原因や解決方法を見つけたい。

・シューティングゲームの敵として設定している隕石にあたった時に効果音を付けたかったのだがうまく起動していなかったので不思議だった。どんなコマンドを打ち込めば上手く起動してくれるのか気になるのでそれらを見つけたい。

(29)

29

・クイズゲームには記したがシューティングゲームの最終キーフレーム（作者の名前や参考文献などがしるされたもの）の前に停止コマンドを打ってしまったようで流れていないので皆さんは気を付けてください。

・クイズゲームにおいて骸骨に打ち込んだ声のコマンドに対するサウンド停止が上手く作動していなかったので何回か試していたがどうにも上手くいかなかった。シューティングゲームの時と同じ原因なのかどうかものすごく知りたいです。

・今回のゲーム作成、論文において十分な情報を集めきれなかったので不十分なものになってしまったことを悲しく思っている。もう少し上手く情報を集めることができていればもう少し立派なものにできていたかもしれないと後悔している。

・今回、簡単なものであるがゲームを作ってみて日頃やっているゲームの作成の難しさ、

それがどれだけ膨大な情報によって成り立っているか、どれだけの人が関わることによって1つのゲームが作成できるのかなどのごく一部だがその片鱗が見えた気がした。

・現在は様々な技術が向上しているためゲームの性能もかなり向上しているので様々なアクションを出来るようになっている。そのため、これからのゲームが一体どこまで進化するのか、また、今のゲーム作成業界はどのように製品を作成しているのかとても気になる。なので、機会があればそこのところを調べてみたい。

・3年の論文において私はゲームの可能性に目を向けたい。ここで言うゲームとは遊ぶものだけでなく、そのゲームを構成している技術もさしている。今の技術ではゲームの複雑な動きをよりリアルなものに、また映像をより繊細に、ゲームの感覚をより現実的なものに力を入れているが私は「ゲームへの完全意識の移動」を研究したい。これは人間の意識を完全にゲームへ移動させ、何も操作しなくてもゲーム世界で行動できるようになることである。このゲーム世界とは現在の画面を見ながらではなくプレーヤーが実際にゲーム世界を体験することである。これを行うためには人間の脳波を読み取ることが必要になってきます。これを読んだものはばかげた話だと思うかもしれないが私はそうは思いません。

何故なら現在の技術で脳波を読み取りその意味を認識する技術が開発されており、また、

目を通さなくても人間に映像を認識させる技術の開発も進行している。つまり、この技術が合わされば人間は本当にゲームの世界、仮想現実に入り込んで動くことができるということです。また、この技術はゲームの中だけではなく様々な分野で利用することができます。なので、私はゲーム技術の可能性を見極めたい思っています。

・2017s fall「How to make interaction（http://www.geocities.jp/liferiskdery/syorui2.docx）では作者が作った簡単なゲームの説明が記載されていますのでよろしければそちらも参考にさひてみてください（ただし、これには最大に簡略した説明しか載っていないのでより詳しい説明を参考にしたい人は今回のレポートあるいは別の参考文献、Webサイトをのぞいてみてください。）

参考文献・音素材提供サイト

(30)

30 無料でゲーム作成ができるツールのまとめ - NAVER まとめ

https://matome.naver.jp/odai/2136885688510854401 Flash(ActionScript)でゲーム作成入門 - ポンクソフト http://ponk.jp/flash/basic/tutorial1

Flashプログラミング：Top

http://www2.toyo.ac.jp/~asahi/education/soron/shiryo/application/picture/flash/index.ht ml

「世界が僕達に揺れるまで」歌ものフリー音楽素材/魔王魂

https://maoudamashii.jokersounds.com/archives/song_kuwabara_sekaiga_bokurani_yureru made.html

機械・近未来 -フリー効果音素材くらげ工匠 http://www.kurage-kosho.info/machine.html フリー効果音素材・無料効果音

http://taira-komori.jpn.org/freesound.html

秋課題レポート

～ゲームの完成に 至るまで～

～ゲームの完成に至るまで～