【Unity】Unityで学ぶStrategyパターン!モンスターに色んな技を使わせよう!【C#】【プログラム設計】

 

こんにちは!河条です!
今回はC#でStrategyというプログラム設計について学びましょう!

今回はPHPじゃなくてC#だよ!こういう設計の知識はオブジェクト指向プログラムであれば他の言語でも使えるから知らない人はぜひ覚えてみてね🤗

※事前知識:C#の基本構文、オブジェクト指向の知識

今回やること

1、技をいくつか用意する
2、何体かのモンスターを生成する
3、モンスターは技を2つまで覚えられる
4、モンスターに1で作った技を使わせてみる

※ 今回はとりあえず機能の確認とStrategyがどんなものかを知るのが目的なので、モンスターの絵とかダメージ計算もなくDebug.Logに出力させるだけです

パッと思い浮かぶやり方

モンスターごとに技のメソッドを用意して、アルゴリズムをかく!となると思います!
ただしこのやり方は思いついただけでも2つ問題があります

1、異なるモンスターが同じ技を持っていても、それぞれモンスタークラスごとに同じ技のメソッドを書かなくてはいけない🤔

技の仕様変更あったらモンスターごとに書いていた同じ技のロジックを全部書き換えていくという作業が必要になり面倒ですね😇チーン

2、今覚えている2つの技をフラグか何かで管理する羽目になる🤔

技の数だけ条件分岐が必要という面倒くささになります。まあList使えば何とかできそうな気もするけど😇チンチーン

Strategyパターンとは

ではどうすれば良いか!ということでStrategyパターンです!
Strategyパターンはいろんな状況、仕様に応じてアルゴリズム(今回でいうモンスターの技)を簡単に変更することができます!
これを使って上記の2点の問題を解決しましょう!

ザックリとした考え方

実装方法としては、技クラスという抽象クラスを継承させた技固有のクラスを何個も作り、インスタンス化させたモンスターに2つ技を持たせるイメージです!

これでモンスターごとに同じ技を記述する必要は無くなりますし、技の仕様が変更になってもそれ1つだけ直せば大丈夫です!
また、モンスターには1番目 or 2番目の技を使え!という命令だけで条件分岐もなく持たせている技を使わせることができます!

実際のコード

まずはいきなりメイン処理を!割とスッキリしていると思います!
条件分岐も一切使わずに、また技の切り替えも簡単にできますね!
また新しい技が増えたとしてもモンスタークラスは触る必要なく、技クラスを増やしてインスタンス化するだけで対応できます!(依存関係のないプラグラムってやつですね!)

上のコードの実行結果(技効果も載せてます)

ではメイン処理のようなプログラム組むための準備となる技クラスとモンスタークラスを作っていきましょう!

まずは冒頭でも書いた技の抽象クラスからです!

次に技クラスを継承させて実際の技のクラスを書きましょう!

最後にモンスタークラスです!

ざっくりまとめ


モンスタークラスにprivateな技の変数を2つ用意し、メイン処理で代入しています!
攻撃時は代入した技に応じてAttack関数とSkilleffect関数が動いてくれます!

今回はカワノバナとカワノカゲのモンスター二匹だけだけど、三匹になっても四匹になっても同じようにモンスタークラスを生成して、技を代入すればいいです!
新しく技を増やしたかったら(水鉄砲とか)その都度、技クラスを作ればモンスタークラスはそのままで拡張できます!
依存関係のないプログラムの意味はこれで何となくわかると思います!

ただあくまでもStrategyの一番の特徴は簡単にアルゴリズムの切り替えができることです!
結構汎用性高いと思うのでぜひ使ってみてください!!!!(^o^)人(^o^)

似て非なる疑似クラス!:nth-child(n)と:nth-of-type(n)の違い

こんにちは、初めまして。らび太と申します。
初めての投稿です。これからよろしくお願いします。

(こうやって書くと90年代のWeb掲示板みたいですね。。)

さて今日は、疑似クラス「:nth-child(n)」と「:nth-of-type(n)」について書いていこうかと思います。
どちらも「上からn番目の要素」を選択するのですが、childとtypeで選択する基準が異なります。

それではまず:nth-child(n)からー。
以下のhtmlをもとに話を進めていきます。

:nth-child(n)は、親要素から数えてn番目の子要素を選択することになります。
記述はこのような感じです。

親要素(ここではsection要素)には、divとp合わせて6つの子要素があり、p要素は2,3,5,6番目にあります。
上記cssは「親要素内にある子要素で、3番目と4番目がp要素だったらそいつの背景色を変えてね」という意味です。
しかし、4番目にはdiv要素があるため、実際に適用されるのは親要素から数えて3番目の子要素(p要素)のみとなるのです。

結果は以下のような感じです

対して:nth-of-type(n)はというと

:nth-of-type(n)は、親要素内にある同一の子要素のn番目を選択することになります。
先述のchildだと親要素内のすべての子要素が対象だったのに対し、
of-typeの場合だと「親要素内にあるp要素から3番目と4番目の背景色を変えてね」という意味の記述になるのです。
上記のhtmlではp要素が4つあるので、その中から3番目と4番目の背景色が変わります。

結果は以下のような感じです

まとめると、

  • 「指定した要素が親要素からn番目にあればスタイルを適用」するのが:nth-child(n)
  • 「指定した同一の要素が親要素からn番目にあればスタイルを適用」するのが:nth-of-type(n)

ということになるわけです。

この違いがややこしい、というか、初めてhtml/cssを勉強する人にとってはなかなか理解しにくいものがあるのではないでしょうか。
まさに自分がそうでした。。笑
なので、自分自身の復習もかねてこれを記事にしようと思いました。

ちなみにこの2つの疑似クラス、(n)の部分は数値のほかにも
even = 偶数番目の子要素
odd = 奇数番目の子要素
3n = 3の倍数の子要素
などといったキーワードや数値を入力することもできます。

1段ごとの写真配置を左右交互にレイアウトしたい時などに非常に有用です!
クラスやidを使わずにスタイルの使い分けができるこの疑似クラスたち、うまく使いこなせれば様々なレイアウトに応用ができると思うので試してみてくださいねー。

それではまた!

MacとEclipseでJavaプロジェクトを作成しよう!②〜Servletを使ってみる〜

こんにちは。tutinokoです。

前回のJavaの画面表示からの続きです。前回のは画面を表示するだけのほぼHTMLなので、もっとJavaらしいことをしましょう。

前回のソースからそのまま追加していきましょう。
index.jspに何かデータを送信したいので簡単なフォームを作ります。

サーブレットを作成してデータを受け渡すプログラムを作成しましょう。
プロジェクトエクスプローラでJava/srcで右クリックして、新規>サーブレットを選択します。

クラス名を入力して「次へ」を押します。

クラス名と同時にパッケージも作ってしまいましょう。
今後、ソースファイルが増えていくと、役割ごとにパッケージを分けた方が見やすいです。

今回はtestパッケージの中に全部突っ込んでしまいますが。

さて、次の画面でそのまま「次へ」を押します。

次の画面で自動で欲しいメソッドを作成してくれる便利機能を利用します。
今回はGETでフォーム送信しているので、「doGet」を選択して完了ボタンを押します。

そうすると自動で空のメソッドが挿入されたファイルが出来上がります。
クラス名の上のアノテーション

@WebServlet(“/TestSend”)

これと先ほど作ったフォームのaction=”TestSend”が結びついていて、送信ボタンを押すと、actionでつけた名前のプログラムめがけてビューン!と飛んで行って処理をしてくれるわけですね。

実際に処理するプログラムは、doGet()メソッドの中に書いていきます。

ちょっと長くなるので、今回はここまで!
Eclipseって難しいこと考えなくても骨組みを用意してくれるので便利ですね!

保存保存

イラレ(illustrator)の機能!その2!〜段組設定〜

どうもー♪
taeminですー♪
今回も前回同様Illustratorの基本操作についてです♪

今回は「段組設定」という機能をご紹介します♪( ´▽`)

例えば、、、こんな↓格子状のオブジェクトなどを作成するとき、メッチャ役に立つ機能です!

「段組設定」を知るまでは、いちいち・・・
こうやって・・・
ボックスを一つ一つ並べていました・・・

こんなことをしていては、非常に効率が悪く、

かつ、

非常に面倒くさい!!!

「段組設定」を知って効率が格段に良くなりました!!
(“段”組だけに格”段”に、なんつって・・・←社内のオッチャンデザイナーの親父ギャグが移ってしまった((((;゚Д゚))))))))

 

さてさて!その段組設定のやり方です!

1.なんでもいいのでまずボックスを作ります。
そしてそれを選択します。

2.上のメニューバーの「オブジェクト」→「パス」→「段組設定」を選択!

3.するとこのような画面が出てきて簡単に分割をすることができます!
「プレビュー」にチェックを入れて、現物を確認しながらの分割もすることができるので非常に便利な機能となっています!

こんな風に隙間を空けることもできますよ♪

ね、簡単だったでしょ?

以前の私のように、ボックスをいちいち並べて格子状のオブジェクトを作ってる人がもしいれば、効率化を図る上でこの「段組設定」は必見の機能となっています♪

0と1の隙間。PCから「小数点」を考える。

こんにちは!鳩豆です!

前回の「デジタル」を今更考えてみたよ、の記事に続き今回は0と1の隙間、、小数点の世界はPCではどうなっているのか考えてみたい。

PCでは2進数ベースであるものの、実際は色んな進数を組みわせて処理するらしい。
2進数で計算し、16進数に変換、はたまた10進数で表示する・・・・などなど。
す、すごい。

そこでふと疑問が湧いた。
そういえば小数点ってどうするんだろう?
2進数って桁が多いのに、さらに桁が小数点以下に付くと、いくら処理が早いからって流石に横に並びすぎじゃね?というショーもない疑問が湧いたのだった。

2進数で
1+1 は…10

もう桁が増えたーーー。

10進数の小数点
12.2は
2進数で
10110.00110011001100110011001100110011001100110011001100110011
(打ち切り)

桁が多っ。打ち切らないと大概、小数点部分は循環する。

この桁数をビットの情報に乗せるということはさらに(ものすごい雑に言うと)桁が増えることになる。
1文字も8ビットで表現する場合、この桁数は桁数だけですでに合理的じゃない。

と言うことで。
心配するまでもなくしっかり準備されていた。

PCでは浮動小数にして情報を渡すらしい。

「浮動小数点数」のwikiによると・・・・

浮動小数点数(ふどうしょうすうてんすう、英: floating point number)は、浮動小数点方式による数のことで、もっぱらコンピュータの数値表現において、それぞれ固定長の仮数部と指数部を持つ、数値の表現法により表現された数である。

うむ,なるほどー。
全くわからんわっ!!

文字の意味を調べて、その説明文が何一つわからん時の悲しみと言ったら・・・気を取り直して説明すると・・・・

12.345(10進数)を内部で処理する際に、

12.345を符号と指数と仮数に分けます。(そういえば習ったな〜)

符号(ビット先頭)は正の数なので符号は0、

12と0.345に分けて、
二進数に変換してみると・・・

12⇨1100と
0.345⇨010110000101000111101011100001010001111010111000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

0がまだ多いので大変だ……
そこで小数点を左に移動させて1だけ残して表現すると、

1.100010110000101000111101011100001010001111010111000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
x(かける)
23

と表現できる。まだ多い・・・・

そこで今回は単精度のfloatで指数と仮数を32ビット(4byte)で表現する。

32ビットでは先頭が符号、後の8桁が指数部、残り23桁が仮数部となるので、

0 10000010 10001011000010100011110

結合すると、

01000001010001011000010100011110

12.345はと32bitのfloatでは↑で表現しているのだね…..ふう、やれやれ。

いつも処理とか、いろいろありがとうパソコン君!
ではまた!