HTML入門②さっそく書いてみる

書いてみる

HTMLを覚えるには実際に書いてみることが大切です。紹介しているコードは実際に書いてみてください。

それではHTMLの書き方です。HTMLを保存するフォルダを任意の場所に作っておいてください。

まずはテキストエディタを起動します。新規作成で真っ白なテキストエディタを開いてください。

ここにHTMLのコードを書いていきます。

まずは

 

と書いてみましょう。書き終わったらさきほど作ったフォルダに「index.html」という名前をつけて文字コードUTF-8で保存します。拡張子を.htmlにするのを忘れないでください。

保存したhtmlファイルをお使いのブラウザにドラッグアンドドロップしてみてください。

するとブラウザ上に「こんにちは!」と表示されますね!

各部の説明

<!DOCTYPE HTML>
この部分はHTMLのバージョンを指定する記述です。例の場合ですと、HTML5というバージョンを指定しています。テンプレートなのでしっかり覚えておいてください。

<html> <head> <body>
これは前回紹介したので割愛します。忘れてしまった方はもう一度確認しておいてください。

<meta charset=”utf-8″>
これは文字コードを指定する記述です。例の場合ですとUTF-8を指定しています。ホームページで日本語を使う際に必要なものなのでこれもしっかり覚えておいてください。

最後に

今回紹介したコードが、webページを作る際のHTMLコードの基本テンプレートになります。

このコードにwebページの内容や構成を付け足してホームページを作っていきますのでいつでも書けるようになっておいてください。

HTML5入門①HTMLとは

HTMLとは

HTMLは、Hyper Text Markup Languageの略で、webページを作成するために作られた言語で、文章の構造を指定する言語です。

「ここに文字を配置してその下に画像を配置。画像をクリックすると別のページに飛んで…」という風にページの構造をHTMLで記述していくだけで誰でも簡単にwebページ(ホームページ)が作れてしまいます。

HTMLをブラウザ(InternetExplorerやChrome、Safariなど)が認識し、解読を行うことによって内容を表示します。そのため文法を間違わず正確に記述しないと、表示が崩れたり見づらくなったりします。

とはいってもゲームを開発するようなプログラミング言語とはまったく違い、大して複雑な文法ではないので簡単に覚えられますよ!

 

 

HTMLの構成

HTMLは、「要素」を組み合わせて記述します。

要素はwebページを構成する部品(文字や画像など)です。

 

要素の名前を<と>で囲んだものが「タグ」です。

画像の例ですと、<a></a>がタグです。開始タグ終了タグで囲んだものが要素になります。要素によっては終了タグが必要ないものもありますので注意が必要です。

 

要素名の後ろにスペースを空けて続けて記述しているものが「属性」と呼ばれるものです。

属性は要素の詳細情報を指定する部分です。画像の例の場合、 a要素(リンクを貼る役割を担う要素) に対してリンク先を「http://bytejp.com/」にするよう指定しています。

属性は要素によって様々なものが用意されています。

HTMLの基本文法

HTMLコードは、基本的には次のような構造で記述されます。

<html>タグは、ここから先はHTMLですよ~ということを示す要素です。タグに囲まれている範囲がHTMLの文書として定義されます。

<head>タグは、ページに関する情報を記述する要素です。ページのタイトルの指定や外部ファイルの読み込みなどを行う部分です。

<body>タグは、ページの本文を記述する要素です。タグに囲まれている範囲がページで表示される部分になります。

 

小難しい説明はこのくらいにしておいて、次回からさっそくHTMLを書いてみましょう!

HTMLを書くにはテキストエディタが必要です。なんでも結構ですのでインストールしておいてください。

Unity2Dでタップで飛ぶゲームを作る④障害物に当たり判定をつける

前回にて壁ブロックが自動生成され向かってくるところまでつくりました。

しかし、このままでは鳥とブロックが当たっても何も起こりません。

今回は障害物に当たり判定をつけていきます。

①鳥にBox Collider 2D をアタッチする。

Edit Colliderで形を調節してみてください。

 

②ブロックのPrehubにBox Collider 2D をアタッチする。

 

③鳥のRigidbody2Dの設定でConstraintsのFreeezeRotationにチェックを入れる。

これでくるくる回らないようになります。

 

これでプレイしてみてください。

あたると後ろに持っていかれる筈です。

 

いい感じですね。

 

今回はここまでです。

 

 

 

Unity2Dでタップで飛ぶゲームを作る③障害物をランダムで生成する。

今回は障害物となるブロックをランダムで生成していきましょう。

まずロジック(アルゴリズム)を考えましょう。

  1. 乱数を生成しその数のブロックが複製される
  2. 位置が画面ギリギリのY軸を基準に調整される
  3. 複製されたオブジェクトは空のゲームオブジェクトの子オブジェクトになる
  4. 3の親オブジェクトがずっと左に移動する。

こんな感じで実装してみましょう。

①左に移動し続ける空のオブジェクトを作成する。

AllTransという名前で空のオブジェクトを作成しました。現在のヒエラルキーは以下の通りです。

②Blockを複製できるようPrehub化する。

Blockを複製して取り扱いやすいようにPrehub化しましょう。

シーンにあるBlockをしたのAssetのところにドラック&ドロップします。画像とかC#スクリプトとかがあるところですね。

こんなのができました。

③ゴリゴリ、スクリプトを書く

以下のスクリプトをAllTransにアタッチしてください。

インスペクターで値をとりあえず以下のようにしてみてください。

  • Block:Prehub化されたBlock(※シーンにあるものではない)
  • AllTrans:親となる空のゲームオブジェクト
  • Allspeed:ブロックが左に向かってくるスピード
  • TimeOut: ブロックが来る頻度
  • Block Base X : 画面の右の外側となるX (10ぐらい)
  • Block Base Y : 画面の端となるY(4.5ぐらい)

 

 

以下のようになりましたか。

 

 

しかしこれでは鳥がブロック当たっても何も起きません。

次回はコライダーを設定し当たり判定をつけていきましょう。

 

Unity2Dでタップで飛ぶゲームを作る②鳥を飛ばす

前回までで素材をインポートしました。

今回は鳥を飛ばす機能を実装しましょう。

①鳥にRigidBody2Dをアタッチし重力で落ちるようにしましょう。

RigidBodyではなくRigidBody2Dであることに注意してください。

RigidBody2DのSimulatedのチェックが重力で落ちるか落ちないかです。

②鳥が左クリックすると飛ぶようにしましょう。

以下がスクリプトです。

Birdに飛ばす鳥を、Jump Powerで飛ばす力を調節してみてください。

以下がRigidbody2Dとスクリプトのインスペクターでの設定です。

 

こんな雰囲気になりました。

Unity2Dでタップで飛ぶゲームを作る①

今回からUnity2Dでタップで飛ぶゲームを作って行きたいと思います。

①2Dで新規プロジェクトを作成しましょう。

②このゲームで使う素材たちをインポートしましょう。

作りたいゲームの雰囲気です。

 

インポートする画像たちです。

 

③とりあえずこれらをシーンに配置していきましょう。

こんな雰囲気でしょうか。

いったん位置等は適当です。

 

実装としてはこの鳥は重力で落ちていってタップで上にあげて右から左へ流れてくるブロックを避けていくわけですね。

 

 

 

今回はここまでです。

UnityでFPSゲームを作る⑥エイムを実装する。

前回の記事

UnityでFPSゲームを作る⑤銃を実装する。

 

今回は前回の記事で設置した銃にエイムを実装してみましょう。

マウスをクリックすると銃が動くわけですがその動く仕組みは以下の2つの方法どちらかで実装することになると思います。

  • AnimaterController、Animationの機能を使い銃の位置が変わるアニメーションを再生する。
  • ObjectのTransformを動的に変更する。

今回はスクリプトのみで実装するので、後者を採用することにしましょう。

 

Unity2Dでタップで飛ぶゲームを作る⑤コインがでるようにする

前回まででゲームの根幹をなす部分はできました。

今回はプラスの要素としてコインがでて集めれるようにしましょう。

 

①コインの画像とコインを拾ったときの音を拾ってくる

http://design-ec.com/?p=9

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

画像は一度シーンに配置しAssetsにドラック&ドロップしてPrehub化してください。

名前はcoinとします。

 

②CoinのPrehubにCircle Collider2Dをアタッチする。

CoinのPrehubにCircle Collider2Dをアタッチしてください。

そしてIs Triggerにチェックを入れてください。これで当たり判定だけを発生させ当たったときに力は発生しません。

 

 

 

②BlockCreater.csを改変する。

 

以下が改変したBlockCreater.csです。

スクリプトの値です。

CoinでcoinのPrehubを選択してください。

 

②コインに当たった時に音が鳴りコインを消すようにする

先ほどインポートした音源をシーンの鳥オブジェクトにアタッチしてください。

するとAudio Sourceというコンポーネントが追加されます。

Play On Awakeのチェックを外してください。

そしてシーンのオブジェクトにAudio Listenerを追加してください。追加されていればその一つで構いません。

 

コインに当たった時に音が鳴りコインを消すようにしましょう。

BirdController.csを改変します。

以下が改変したBirdController.csです。

以下が値です。

Coin Get Soundにコインの音源を選択してください。

いい感じですがコインの位置等はだいぶ適当なスクリプトです。

自分なりに変えてみて下さい。

UnityでFPSゲームを作る⑤銃を実装する。

前回の記事

UnityでFPSゲームを作る④ジャンプの修正

前回の記事まででFPSの基本的な視点操作を実装しました。

今回は銃をつけて打てるようにしたいと思います。

それでは必要な無料アセットを紹介します。

近未来の武器感がよかったのでこれにしました。

①これをインポートしてください。

こんなフォルダができました。

Prefabにはそのままシーンに配置してマテリアルも割り当てられたものができるのでそれを使いましょう。

 

赤が好みなんで赤にします。

②シーンに配置してください

その銃をMain Cameraの子オブジェクトにします。

以下のような構造になります。

 

③武器の位置をいい感じに調節します。

私の場合、以下のようになりました。インスペクターの位置も確認してみてください。

回転はさせていません。

 

いい感じですね。

 

次回は画面真ん中の十字とエイムを実装していきたいと思います。

UnityでFPSゲームを作る④ジャンプの修正

前回の記事

UnityでFPSゲームを作る③RigidBodyとジャンプの実装

 

前回の記事で実装したジャンプの連続で飛べてしまうという問題点を直島しょう。

実装するアルゴリズム

床にtagをつけ床にPlayerのClliderが接触しているかつスペースキーが押されたときにジャンプするようにする。

 

①Groundタグを作成する。

PlayerのインスペクターからGroundタグを作成しアタッチします。

②スクリプトを変更する。

前回のPlayerJump.csを以下のように変更します。

地面となるオブジェクト(その上でジャンプを許可したいオブジェクト)にはGroundタグをアタッチしてください