ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【開発日記:ブロック崩し】第3回 ボールの動きを実装しました!

第3回目となりました!

今回はボールの動きを実装していきました!

具体的な内容としては以下の通りです。

  • ゲームオブジェクトの下準備
  • ボールの動き出しの処理
  • プレイヤーに衝突したときの跳ね返り処理

と、なります。

 

ゲームオブジェクトの下準備

 跳ね返り処理をする前に下準備をします。

f:id:win-friendof:20160724154355j:plain

以下の設定を行っていきます。

  • tagを「ball」に設定
  • RigiBody2Dを設定
  • RigiBody2Dの中にある「Mass」を極限に小さく設定
  • Circle Collider2Dを設定
  • スクリプト「BallActivity.cs」を設定

 

ボールの動き出しの処理

 まずはボールの動き出しを行います。

「BallActivity.cs」に記述していきます。

// Use this for initialization
void Start () {
  //乱数で初期方向を決める
  if (Random.Range (1, 100) > 50) {
    speed_x *= -1;
  }
  if(Random.Range(1, 100) < 50){
    speed_y *= -1;
  }

  vec.x = speed_x * Time.deltaTime;
  vec.y = speed_y * Time.deltaTime;
  GetComponent().AddForce (vec, ForceMode2D.Force);
}

 初めの処理は、乱数で動き出す方向を決めていきます。

プラスで右、上方向に動きます。

マイナスで左、下方向に動きます。

「GetComponent().AddForce (vec, ForceMode2D.Force)」を使うことで「vec」方向に動き出します。

 

この時点では動き出してそのままどこか行っちゃいます 笑

プレイヤーに衝突したときの跳ね返り処理

跳ね返るための処理を行っていきます。

f:id:win-friendof:20160724155521j:plain

上部メニューの[Assets]⇒[Create]⇒[Physics2D Material]をクリックします。

すると以下のようなマテリアルができるのでこれの設定をしていきます。

選択すると「Friction」と「Bounciness」を設定できるので「Bounciness」の値を1にします。

f:id:win-friendof:20160724160145j:plain

このマテリアルをballのCircle Collinder2Dに設定します。

f:id:win-friendof:20160724161108j:plain

赤枠で囲った場所をクリックすること、別ウィンドウが出現します。

先ほど作ったやつが[Assets]タブの中にあるのでクリックして設定していきます。

これで必要最低限のボールの処理が出来ました!

 

[]

BallActivity.csの中身は次回詳しくやっていきます!

【web】レスポンシブなサイトを作るテクニック②

前回に引き続き、CSSでレスポンシブサイトを作るためにはどうすればいいのかを紹介します!

 

今回は、PC版では表示させたいけどスマホ版では表示させたくない!という要素に対していい感じのテクニックを紹介します!

 

そもそも何をしたいのか?

結局何をしたいのか分かりづらかったので図を使って説明していきます!

f:id:win-friendof:20160719230650j:plain

例えば、上のようなレイアウトのサイトを作りたいとします。

どちらもよくあるようなレイアウトですね!

しかし、PC版には「コンテンツC」があり、SP版にはありません。

となるとメディアクエリを使って「コンテンツC」に「display : none ; 」を掛けるのが普通ですね!

今回の場合ではそれでいいですけど、表示したくないコンテンツが多くなると記述が大変になってきます><;

そんな処理を楽にするテクニックを紹介していきます!

 

表示非表示をひとまとめにするCSSの記述

なんだかんだ前置きが長くなってしまいましたが、仕組みとしては簡単です。

PC(SP)のときはnoneになり、SP(PC)のときはblockになるclass」を実装すればいいのです。

で、実装したのが↓↓です。

/*スマホのとき*/
@media screen and (max-width: 768px){
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

/*PCのとき*/
@media screen and (min-width: 769px){
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}

今回はブレークポイントを768pxに設定してますが、ここは適宜変えてください!

これでPC版だけに表示させたいときは「class="pc"」

スマホ版だけに表示させたいときは「class="sp"」

HTML側のコンテンツに付けてあげればOKです!

 

 

【web】レスポンシブなサイトを作るテクニック①

今回はCSSでレスポンシブサイトを作るためにはどうすればいいのかを紹介します!

 

レスポンシブデザインとは?

まずは、web入門者のためにレスポンシブデザインとは何かを説明してきます。

レスポンシブデザインとはウィンドウの大きさに応じてWebサイトのレイアウトが変化するデザインのことです。

レイアウトの変更は基本的にHTMLはいじらずにCSSもしくはJSのみで変化させます。

近年、スマートフォンが増えてきてスマートフォン用のサイトを作らなければならないという点から出てきた技術です。

ちなみに本ブログもレスポンシブになっています。

PCで見ている方は、ウィンドウサイズを小さくしたり大きくしたりするとわかると思います!

 

 CSSでレスポンシブデザインを作る方法

基本的にはCSSの”メディアクエリ”を使って実装します。

記述方法を見ながら説明します。

/*スマートフォン用デザイン*/
@media screen and (max-width: 767px){
  /*ここにcssを記述します*/
}
/*タブレット用デザイン*/
@media screen and (min-width: 768px) and (max-width: 1024){
  /*ここにcssを記述します*/
}
/*パソコン用デザイン*/
@media print, screen and (min-width: 1025px){
  /*ここにcssを記述します*/
}

 まず、「@media screen」でメディアクエリを使うぜ!って感じです。

「max-width: 767px」とあります。これは”横幅が0~767pxまでの場合ここのcssの記述を使う!”という意味になります。

「min-width: 1024px」の場合では”横幅が1024px以上の場合ここのcssの記述を使う!”という意味になります。

「and」を使うことで「768px~1024pxまで」というように連結させることが出来ます。

 

横幅に指定する値は何をとればいいのか?

横幅に指定している値(今回は768px, 1024px)はどう決めればいいのか悩みますよね><;

この値をブレークポイントと呼びます。

768pxと1024pxはどんな値なのか?

それはipadのサイズです!

ぶっちゃけ、どのサイズがスマホでどのサイズがPCなのかはなかなか決めにくいところです。

なので結構売れてるipadを参考にしよう!ってまぁそんなところですw

今後はどんなサイズの端末が主流になるのか分からないので、あくまでも参考程度って感じです汗