見出し画像

初心者でも"とりあえず"ノベルゲームを作ろう!~その1~

導入編で紹介した画像やらソフトやらを用意した状態で進んでくださいね。

HTMLの基礎を作る

ブラウザ全体に表示させるというよりも、ブラウザの中に小さな箱を作ってその中にゲームを表示させるようにする。
その箱をこれから作っていく。

HTMLの書き方の基礎

基本的にこの書き方をすればHTMLは書くことができる

  • <>で要素(役割を持った文字列)を囲む(例<p>~文章~</p>)

  • <>で始まり</>で終わる(一部例外有)

  • <>と</>の間に別の要素を入れることができる(例<div><p></p></div>)

HTMLのひな型を作る

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

これを書くときにEmmetがあるととても楽になる。
ひな形の作り方は、「!」を入力して「Tabキー」を押下するとこのひな形が出てくる。
エディターによって若干の差はあるが、Emmetを使って表示されたものを使えばよい。
また、Emmetの使い方の基本は「要素(<>で囲まれた文字)+Tabキー」で使うことができる。

<html lang="en">の部分を変更していく。
この部分はこのページの言語を表していて、デフォルトでは大体の場合英語となっている。
ここを直しておかないと、ページを開いた時に翻訳のボタンが表示されてしまう。

<html lang="ja">

日本語の設定にできたら、このファイルを保存していく。

ファイルの保存

今作ったHTMLのひな型の書かれたファイルを保存していくが、ゲーム専用に新しいフォルダを用意してそこにこれから作るファイルたちを保存していく。
また、フォルダの名前やファイルの名前は全てアルファベットで記入していく。
今回作ったファイルは「ゲーム専用フォルダ」の中に「index.html」で保存しておく。

ゲーム画面を作る

これから書く部分にゲームが表示されるようになる。

<body>
    <div id="screen"></div>
</body>

bodyタグ(<body></body>)の間にdivタグ(<div></div>)を挿入する。
これから~タグと言ったら<>を使った部分になる。
divタグの頭の方にidというものが付いているが、これはCSSやJavaScriptとの連携で必要となってくる。
idは一つのHTMLの中で同じ名前のidは一つしか存在してはいけないというルールがあり、唯一性を持たせたいタグにつける。
「=」の先は任意の名前を付けることができる。
idと似たものでclassというものがあるが、そちらは一つのHTML内で同じ名前が複数存在してもよいというルールになっている。

CSSの基礎を作る

CSSの保存先と書き方

CSSのファイルも用意する。
ゲームフォルダ内に「css」の名前で新しいフォルダを作成する。作ったフォルダの中に新しいファイル「style.css」を作る。
今のところ、ゲーム専用フォルダの中身はこのようになっているはずだ。
cssフォルダの中にstyle.cssが入っている。

フォルダの構成

ファイルの準備ができたところで、CSSの書き方の基本はこのようになっている。

  • HTMLのタグそのものに変化を与えたい場合はタグの名前をそのまま書く(例:html{~})

  • idに変化を加えたい場合は「#」の後にidの名前を書く(例:#id名{~})

  • classに変化を与えたい場合は「.」の後にclassの名前を書く(例:.class名{~})

  • {}で囲む

  • 下の行に書いてあるほど優先順位は上になる

これを踏まえて実際に書いてみる

@charset "UTF-8";
html{
    overflow: auto;
}
body{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: serif;
    color: #000;
    background-color: #fff;
}
#screen{
    position: relative;
    width: 900px;
    height: 675px;
    margin: 20px auto;
    background-color: #000;
    overflow: hidden;
}

classについてはまだ出てきていないが、後に出てくるのでその時におさらいしよう。
このCSSで何が行われているかというと、

  • overflow-x: hidden;で横向きのスクロールバーを非表示にする

  • bodyに対して内側(padding)と外側(margin)の余白をなくす

  • bodyのタグの中にある文字のフォントの指定と文字色の指定

  • 背景色の指定(background-color)

  • #scleenに対してサイズの指定 width: 900px(横)height: 675px(縦)(このサイズと背景画像のサイズを同じにする)

  • #scleenを縦20pxの外側の余白、画面横向き中央に配置する(margin: 20px auto;)

  • ゲーム画面内に配置した物のはみ出した部分が非表示になる(overflow: hidden;

大まかにこんなことが行われている。
しかし、このままではCSSは動作しない。
試しにindex.htmlをブラウザで開いてみてほしい。ブラウザは立ち上がるが真っ白い画面が表示されると思う。
そこでindex.htmlに一行書き足す。
headタグの中に

<link rel="stylesheet" href="css/style.css">

この一行を書き足した

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>

このようになっただろうか?
これで再度index.htmlを開くか、開いている場合はリロードをしてみてほしい。画面にこのように表示されたと思う。

今の状態

この黒いゲーム画面の上にこれから背景や立ち絵、テキストなどゲームに必要な様々なものを表示していく。

画像ファイルの保存方法

画像を表示させるための準備をする。
まず、先ほどのcssフォルダのようにゲームフォルダ内に「img」フォルダを作成する。このフォルダに使用する画像のすべてを保存する。
また、JavaScriptで画像を変更させるため、規則性を持ったファイル名にしておかなければいけない。

  • 背景画像、スチルは「bg~」として、bgの後ろに番号をつける(bg0.jpgのように)なるべく連番でつけるのが良い

  • 立ち絵は「chara~」として、charaの後ろに番号をつける。以下背景と同じ手順

  • アイテムなどは「item~」としてitemの後ろに番号をつける。以下背景と同じ手順

画像の名前の付け方

必ずこの作業をしてから次の手順に進む。

背景を表示する

HTMLのscreenのdivタグの間にimgタグを追加する。

    <div id="screen">
        <img src="img/bg1.jpg" alt="" id="bgimg">
    </div>

imgタグは閉じタグ(</>の方)がいらないタグの一つ。
また、タグの中に値を入れることで画像を表示する。

  • src:表示したい画像の位置を示す。このHTMLファイルから見てどの位置にあるかで書き方が変わってくる。要は使いたい画像の住所。

  • alt:万が一画像がなかった時に文字で説明する部分。今回は画像が表示されないと成立しないため、省略している。

次にid="bgimg"の処理をCSSに記述する。

#bgimg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

#screenの下に追加

  • ゲーム画面に対して絶対値で配置する(ブラウザではなく、ゲーム画面の左端が起点になる)

  • ゲーム画面に対して目いっぱい画像を表示する

  • ゲーム画面内で一番下のレイヤーとして配置する

  • object-fit: coverでアスペクト比を維持

このような処理が行われている。
ここでもう一度ブラウザを確認してみよう。
用意した背景の「bg1.jpg」と名付けた画像が表示されていることだろう。

ここまでの確認

ここまでうまくできただろうか?
うまくできなかった場合は下記のコードをよく見て誤字脱字を発見してみてほしい。

index.htmlのソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div id="screen">
        <img src="img/bg1.jpg" alt="" id="bgimg">
    </div>
</body>
</html>

style.cssのソースコード

@charset "UTF-8";
html{
    overflow: auto;
}
body{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: serif;
    color: #000;
    background-color: #fff;
}
#screen{
    position: relative;
    width: 900px;
    height: 675px;
    margin: 20px auto;
    background-color: #000;
    overflow: hidden;
}
#bgimg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

この記事が参加している募集

#ゲームの作り方

879件

この記事がいいなと思ったらサポートをよろしくお願いします!