【Unity】UIの基本(Canvas,描画順,アンカー,ピボット)を徹底解説してみる
UIの基本
右上の「create」からUIを選択し「text」などとすることでUI要素を作ることができます。
すると同時にCanvasとEventSystemというものができると思います。
UIは全てCanvasの子要素として作られます。
なお、すでにUI要素を作成しているときはすでにできているcanvasのなかにUIが作られ、EventSystemは作られません。
eventsystemとはボタンのクリックなどのイベントを感知するためのものです。間違って消さないようにしましょう。
デフォルトではUIの描画モードはScreen Space-Overlayになっています。
これはキャンバスの位置にかかわらずキャンバスが画面いっぱいに移されるというものです。
上の画像を見るとわかる通り、UIであるテキストとcubeの大きさはシーン上では全く違いますが、ゲーム画面では同じように見えます。
イメージとしてはUI以外のものを写すものと、UIだけを常に画面いっぱいに写すカメラが二つあって、その二つの映像をゲーム画面では足し合わせて見ている感じです。
UIの描画順
描画の順番はヒエラルキー上で上にあるものほど奥に描画されます。
下にあるものほど手前にきます。
描画の順番を変えたい場合、zの値を変えることで実現できます。
手前に描画したい場合、zの値をマイナスの値にすればいいのです。
これによりゲーム画面で見たときの大きさが変わることはないので安心してください。
RectTransform
以前こちらの記事でも言ったように子要素のTransformはローカル座標(親要素との相対座標)を表します。
UI要素はTransformではなくRectTransformがついています。
しかしRectTransform自体がTransformを継承したものなので大きくは変わりません。
大きな違いとしてアンカーとピボットの存在があるのでそれについて詳しく見ていきましょう。
アンカー
違いとしてはアンカーの存在があります。
アンカーは錨という意味がありますがまさしくUIを止めておくために必要なものです。
RectTransformの左にある十字の的のような所をクリックすると以下のような画面が見えます。
デフォルトでは真ん中のものになっています。
これは親要素のど真ん中(縦方向の真ん中かつ横方向の真ん中)を基準とすることを意味します。
図を見てわかると思いますが真ん中にある10このものはそれぞれ親要素のどこを基準とするかということを示しています。
アンカーはシーン上ではこう見えます。
ここを直接動かす書くこともできますが、さっきのようによく使うアンカーの位置はすでに用意されているので直接動かすことはあまりないでしょう。
アンカーの所をクリックしてシーン場で見えるアンカーがどのように変わっていくか一度見てみるとよくわかると思います。
ピボット
アンカーの下にピボットがあると思います。
これは自分自身の基準のことです。
例えばピボットがx＝0,y=1となっていたら自分自身の左上が基準んということです。
x＝0.5,y=0なら底辺の真ん中が自分の基準となります。
Canvas直下にtextがあってそのrectransftomがこの写真のようになっているとします。
まず親の基準がアンカーを見て上辺の真ん中ということがわかります。
そしてピボットを見ることで自分自身の基準がわかり、自分自身のど真ん中(縦も横も真ん中)だとわかります。
つまりこれは自分の中心を親オブジェクトであるcanvasの上辺の真ん中から下に433.5下に行ったところにするという意味です。
終わりに
UI特にrecttransformのアンんかーやピボットは最初は違いなどがわかりにくいと思います。
このブログを参考にして頑張ってみてください！
【ブログ月次報告】【6ヶ月目】忙しくてあまり更新していないがpv数はどうなったのか！？
ブログ報告6ヶ月目ということでいつものブログ月次報告をやって行きましょう！
先月は初めて本格的にブログをやり、1ヶ月で19記事書きました。
するとpv数もグッとあがりました。
そんな感じで6ヶ月目を迎えましたがどうなったのでしょう？？
みていきましょう。
現在の状況
- 読者数 15→16
- ユーザー数 115→209
- pv数 316→354
- 記事数 34→42
左側は先月(5ヶ月目)の時点での数字です。
右側が6ヶ月目が終了時点でのものです。
記事数はその月が終わった時までの総計です。
1ヶ月で書いた記事の数でないので注意してください。
先月の末に立てた目標は
- 読者数 20
- ユーザー数 200
- pv数 500
- 記事数 34→45
こんな感じでした。
pv数、ユーザー数共に伸びてはいますが、ユーザー数以外目標に達しませんでした。
理由はわかりきっていますw
単純に書いた記事の数が少なすぎました。
これは大学のテストがあったからなので仕方ありません。
それを見越して目標を立てたつもりでしたがちょっと甘く見過ぎでしたねw
こんなブログ開始6ヶ月目でしたが、いいこともありました。
月末にほぼ記事を更新してないのにも関わらず1日あたりのpv数が1.5倍から2倍ほどになりました。
グーグル検索で一ページ目に出てくる記事も順調に増えてきました。
デザインをガラッと変えた
今月やったこととしてテーマカラーを変えたことがあります。
このブログは「Brooklyn」というテーマを使っています。
このテーマはデフォルトではモノクロです。
しかしもう少し明るい感じにしたいと思いメインのカラーを青、差し色を黄色にしました。
個人的には気に入っていますが、まだタイトルとかのところがモッサっとしているのでまたいつかオシャレにしたいと思いますw
7ヶ月目の目標
- 読者数 20
- ユーザー数 300
- pv数 500
- 記事数 42→60
これが次の月の目標です！
次の月はわりと更新頻度も高くできると思うのでこのような感じにしてみました。
5ヶ月目のときくらいの伸びをもう一度目標にしたいと思います！
読者登録等のびるとやる気が出るのでぜひ登録お願いします！
PlantUMLを使ってvscodeでクラス図を描こう！
今回はvscodeを使ってplantUMLでクラス図を書く方法について書いていきたいと思います！
はじめに
みなさんクラス図を書いていますか？
クラス図とは以下のようなものです。
これを見てわかる通りクラスやそのプロパティ、クラス同士の関わりが可視化されます。
私も最近書くようにしたばかりですが、開発の効率が前と比べてかなり良くなりました。
今まで頭の中で考えて行き当たりばったりで開発していました。
そのためコードは長くなり、読みにくいものになってしまいがちです。
しかし、クラス図を書くようになってからは頭の中がすっきりとした状態で素早くコーディングができるようになりました。
はじめから作るべきものがわかっているとかなり楽です。
plantUMLとは？
これを使うことでクラス図などをテキストで書けるようになります。
先ほどのもので言えば下のように書くことで作ることができます。
@startuml
namespace Ball{
class BallController{
}
class BallChange{
}
}
namespace Player{
class PlayerController{
}
class PlayerData{
}
}
@enduml
エンジニアの人にとっては普段のプログラミングと似た感じで図を作成してくれるため、非常にやりやすいと思います。
テキストベースである利点としてGitでの管理がしやすいことも挙げられます。
vscodeを用いてクラス図を書くための手順
今回はvscode場でplantUMLを使っていきたいと思います。
ここからは一から手順を説明していきたいと思います。
Javaをインストールする
まずはJavaをインストールする必要があります。
ターミナルで以下のコマンドを打ってみると現在javaが入っているか確認することができます。
$ java -version
ターミナルがいまいちわからないっていう人はこちらをみてみてください。
turedureengineer.hatenablog.com
これを書いてエンターを押します。
そして
このように現在のjavaのバージョンなどが確認できたら入っているということになります。
入っていなかった人はここからダウンロードしましょう。
無料で使うことができます。
Download Free Java Software
vscodeをインストール
vscodeがない人はここからインストールしましょう。
特に難しくはないと思います。
Visual Studio Code - Code Editing. Redefined
plantUMLをインストール
これはvscodeからインストールすることができます。
一番左に5個並んでるものがあると思います。
その一番下の拡張機能というのを選んでください。
そしてplantUMLと検索してインストールしてください。
これで全ての準備は終わりです。
実際に使ってみる
拡張子がpuのファイルを作って先ほど書いた例を丸々コピペしてください。
そして[option]+[D]を押します。
すると左側にplantUMLプレビューが出てきて画像を見ることができます。
Amazonで買ったラズベリーパイを一週間で使えなくしてしまった話
タイトルの通りですが買ってから一週間でラズパイを使えなくしてしまいました。
今回はこんな話をしていきたいと思います。
まずはじめにラズパイとは何か？
wikipediaにはこう書いてあります。
Raspberry Pi（ラズベリー パイ）は、ARMプロセッサを搭載したシングルボードコンピューター。
まあこれを読んでも意味がわからないと思うので簡単に言うと手のひらサイズのコンピュータです。
みなさんが普段使っているMacだったりWindowsパソコンと同じです。
もちろんディスプレイやマウス、キーボードは別途買ったりする必要がありますが、インターネットに繋いだりその他いろいろなことができます。
元々は教育用に作られましたが、そのお手軽さからIoTや様々なものに使うことができます。
Raspberry Pi3 コンプリートスターターキット (Standard 16G)
- 出版社/メーカー: TechShare
- メディア: エレクトロニクス
- この商品を含むブログを見る
何をしようとしたか？
ラズパイは先ほども言ったように様々なことに使えます。
電子工作、IoT、サーバー構築などががその例です。
私はこの中でもIoTに興味があったので、LINEを経由してエアコンのスイッチをつけたり、消したりできるものを作ろうと思いました。
qiita.com
これを参考にしました。
簡単に手順をを言います。
まずリモコンは人間の目には見えない赤外線を使ってやりとりしています。
スイッチの種類によって赤外線のパターンを変えることでOn、Offを認識します。
そこで赤外線を拾うことのできる装置を買って(秋葉原の専門店などで買えます)、ここにリモコンを向けてボタンを押すことでパターンを調べてファイルに書き込んでおきます。
そしてプログラムから全く同じ赤外線のパターンを発するようにするのです。
日本と海外ではエンジニアの意味が違う？？
今回はエンジニアとはなんなのかということについて話して行きたいと思います。
はじめに
みなさんはエンジニアと聞いて何を思い浮かべますが？
多くの人がパソコンでプログラミングをしている人を思い浮かべると思います。
しかしながらパソコンでプログラミングをしている人だけがエンジニアというわけではありません。
wikipediaで試しにエンジニアと調べてみると技術者のページに飛ばされます。
そしてそこには、このように書いてあります。
技術者（ぎじゅつしゃ）とは、工学に関する専門的な才能や技術を持った実践者のことである。
これを読んでわかるようにエンジニアとは何もプログラミングをしている人に絞られません。
工学分野ならなんでも良いので、建築、機械、応用化学などに携わる人も全てエンジニアということになります。
日本でエンジニアと聞くとパソコンでプログラミングをしている印象がついたのは、ITが盛んになったからですね。
こういう人は正しくはITエンジニアと言います。
【レビュー】Kindle PaperWhiteを半年使ってみたのでメリット、デメリットを紹介！
今回はKindle PaperWhiteのメリットデメリットについて書いて行きたいと思います。
kindleとは何か？
kindleとはAmazonが発売する読書専用の端末です。
同じ名前のアプリなどもありますがここでは端末の名前として使うので混乱しないでください。
Kindle Paperwhite、電子書籍リーダー、防水機能搭載、Wi-Fi 、8GB(Newモデル)
- 出版社/メーカー: Amazon
- 発売日: 2018/11/07
- メディア: エレクトロニクス
- この商品を含むブログを見る
kindleのメリット
目が疲れない
これが一番のメリットだと個人的には思います。
一度見て欲しいのです、本当に電子機器には見えないくらい実際の紙に近いです。
e-inkというものを使っていて実際のインクと同じように見えるものらしいです。
また間接光を使用していることも大きいです。
どういうことか説明します。
まず日常にある物体はそのほとんどが周りの光を反射してそれが目に届くことで見えます。
これが間接光です。
しかしながらスマホやパソコンなどはディスプレイの裏から光を発してそれが直接目に入ってきます。
そのため目が疲れるのです。
一方でkindleは電子機器ですが間接光を採用しているため自然に近い見え方になっています。
ほとんど紙と同じなので長時間見ていても目が全く疲れません。
私と同じように携帯やパソコンの画面を見ていると目が疲れてしまうにはお勧めです。
またブルーライトをほとんど発しないらしいです。
これなら夜寝る前に読んでねれなくなることはありませんね。
軽くて持ち運びしやすい
私が使っているkindlePaperwhiteは182gです。
これは大体iPhonePlusシリーズと同じくらいの重さです。
大きさはiPhoneの倍以上あるので持った時はiPhoneより軽いと思うくらいです。
普段持ち歩くときに重さが気にならないのはもちろんのこと、寝転がって持っても腕が疲れることもありません。
充電が長持ち
公式ではワイヤレス接続オフ、ライトの明るさ10で1日30分使っても8週間持つらしいです。
ちなみに自分はカバンにkindleを入れていて入れていることを忘れたくらいの時にふと開いてみても電源が入りました。
そのくらい驚異的に電池が持ちます。
携帯などと違って色々できない分持続時間がものすごく長い印象です。
読書しかできない
kindleは基本読書しかできません。
ネットには繋がるものの、Amazonのkindleのページしか見ることはできません。
これは一見欠点に思えますが私はむしろ長所だと思っています。
kindleというアプリをiPhoneなどにも入れて本を読むことはできます。
しかしSNSやネットサーフィンなど色々使えてしまうものだと気が散って読書に没入することができません。
kindleは先ほども言ったように読書しかできないからこそ圧倒的な没入をゲットすることができます。
勉強に役立つ
勉強特に英語の勉強に役に立ちます。
英語の勉強では多読というものが大事になってきます。
洋書を読むのは楽しそうだし力もつきそうだからやってみようという人も多いことかと思います。
しかし都会の大きい本屋以外の普通の本屋には洋書はあまり売ってません。
そこで便利なのがkindleです。
kindleなら洋書も豊富にあるし、prime会員ならタダで読めるものもたくさんあります。
またkindleには単語をタップすると意味を表示してくれる機能もあります。
いちいち辞書を引きたくない人などにはとてもお勧めできます。
またパソコンに繋ぐことでpdfをkindleで見ることも可能です。
好きな場所でpdfファイルを見ることができるのは重宝します。
kindleのデメリット
もちろんデメリットもあります。
ターミナルで目的のファイルまで素早くいく方法！
ターミナルで作業をするときまずは目的のファイルやフォルダのところまでいく必要があります。
しかしデスクトップの中にあるAというフォルダの中にあるBというフォルダに行って作業したいときいちいち打つのは面倒ですね。
$cd Desktop $cd A $cd B
こんな風になってしまいます。
まだこのようにどこにあるかわかっているときはいいですがうろ覚えのときは移動の度にlsコマンドを使って探す必要があります。
ではどうしたらいいのか？
答えは目的のフォルダをターミナルの画面にドラッグ&ドロップすることです！
では実際にやってみましょう。
こんな感じでデスクトップの中にAというフォルダがあり、その中のBというフォルダに行きたいとします。
Bというフォルダを選択してターミナルの画面にドラッグ&ドロップするだけです。
するとこうなります。
相対パスが自動的に書き込まれます。
あとはこれの前にcdと打てば目的のフォルダまで一瞬で移動することができます！！
