プログラミングyuu's blog

プログラミングyuu's blog

プログラミングについてできることを説明します!

Boltを使うのか、Visual Studioを使うのか?おすすめはどっち?インストール方法と、使い方も解説!

前書き

皆さん、c#は使えますか?

 

c#を使っている方visual studioを使っている方がほとんどだと思います!

 

だけど、書けない人もいると思います!

 

c#を使わなくてもコードを書く方法はあります!

 

それが、今回紹介する「Bolt」です!

 

今回はvisual studioBoltを比べていきたいと思います!

 

目次

 

Boltとは⁉

簡単に

BoltとはUnityAsset storeから入手できる拡張機能です!

Boltが無料化⁉

以前は、70ドルしていたBoltですが…

 

blogs.unity3d.com

7月22日から無料で使えるようになりました!

 

上の公式ブログを見ればわかりますが、UnityがBoltを買収したことにより、無料になりました!

 

やったー!

 

詳しく

Boltとは、ビジュアルスクリプティングツールといい、

 

「コードを書かなくても、プログラミングができるというものです!」

 

しかしどうやって、コードを書かずにプログラミングをするのかというと…

 

 

ノードベースです! (下のように線でつなぐ感じ)

f:id:yuuyuru:20200920231522p:plain

 

ue4で言う、blue printみたいな感じです!(わからない人は無視でOK)

 

Visual StudioとBoltどっちがいいだろう?

Boltのメリット

チュートリアルが充実している!

直感的にわかりやすい、プログラム!

・Debug.Log(); をしなくてもいい

 

Boltのデメリット

チュートリアルが大体、英語…

・ネットでの検索で検索しても知りたい内容が出ない…

メソッドが多すぎて、どれを使えばいいかわからない…

慣れが必要…

 

Boltの総合評価

メソッドが多すぎるので、Bolt初心者にはどれを使えばいいかわからない

チュートリアルが多いが、英語のものが多い

直感的にわかりやすく、プログラミングの感じが苦手な方はいいかも

 

ということで、

Boltをするには、多少のプログラミングの知識は必要です。

チュートリアルGoogle翻訳で大丈夫です!

慣れは必要で最初は、使いにくいと感じる。

 

どっちがいい

 visual studioに慣れている方はvisual studiioのままでOK!

 

プログラマー以外のプランナーなどがプログラミングでしてみたい場合は

boltをお勧め!

 

Boltの初期設定

1. この↓サイト(unity asset store)に飛びます

assetstore.unity.com

 

2. ダウンロードして、unityで開きます!

   「Import」をクリック

   インポートが終わるまで待つ!

f:id:yuuyuru:20200920235627j:plain

 

3. 「Tools」「Install Bolt」追加されているのでクリック!

f:id:yuuyuru:20200921063142p:plain

 

4. Importを押して先ほどのようにインポートします!

f:id:yuuyuru:20200921063355j:plain

 

5. このようなBolt set upが出ると思うので、「Next」をクリック!

f:id:yuuyuru:20200921063755j:plain

 

6. 「Human Naming」「Programmer Naming」というものがあり

    c#経験者Programmer Namingがおすすめです!

   でも、Human Namingよりも、Programmer Namingのほうが、

   c#から変えやすい思うのでそっちをお勧めします

 

後から変えられますので、わからない方は、好きなほうにしてください!

f:id:yuuyuru:20200921063859j:plain

 

7. これは、何も変えないOK!(下の「Next」をクリック)

f:id:yuuyuru:20200921064831j:plain

 

8. 自分で新しい型を作りたい場合は、使いますが今は大丈夫です!

   下の「Generate」をクリック!

f:id:yuuyuru:20200921065006j:plain

 

9. 「Close」をクリック!

    これで使えるようになりました!

 

Boltの使い方

レイアウト

レイアウトはこのようにすることをお勧めします!

f:id:yuuyuru:20200921065541j:plain

ノートパソコンの画面サイズじゃきついかもです…

 

「Window」から、全部取ってくることができます!

「Graqh」「Graqh Inspector」「Variables」を取ってきます!

f:id:yuuyuru:20200921070049p:plain

これで、できますね!

 

レイアウトをセーブしておきましょう!

 

ノードの使い方

1. 新しくCubeを作り、そのInspectorに「Flow Machine」を追加!

f:id:yuuyuru:20200921070739p:plain

 

2. Newをクリックして、macroを作ってください!

   適当に、保存してください!

f:id:yuuyuru:20200921071000j:plain

 

3. Folw Graqhが書けるようになる!

f:id:yuuyuru:20200921071446j:plain

 

簡単なコードを作ってみる

例えばこんなコードを作ってみます!

f:id:yuuyuru:20200921071813j:plain

 

実行すると…

こんな感じで回転します!

 

 Flow Graqhのほうも実行しているところ青くなりますね!

 

Boltをどうやって習うの?

Boltのチュートリアルは、ほとんど英語だといいましたが…

日本語がないわけではないです。

 

紹介しますね!

 

日本語のもの

1. unity learn

learn.unity.com

unity learnにあるもので、日本語かつ、無料で見れます!

 

2. youtube(unity Jupanさん)

www.youtube.com

このほかにも、4つぐらいBoltの使い方を説明しています!

合計で、3時間半くらい勉強ができて無料でいいのかってくらいお勧めです!

 

英語のもの

英語だからと言って心配する必要はありません。

Google翻訳を使いましょう!

 

1. Bolt公式サイト

ludiq.io

英語ですが、チュートリアルなどが、充実していて、これだけでもいいレベルです!

 

最後に

Boltは、プログラミングを挫折してしまった方や、デザイナープランナーの人にはお勧めですね!

でも、visual studioを現在使っている人は、それのままでいいかなって感じでした!

私的には難しいです…

 

プログラミングを始めたての方は頑張ってください!!

 

python勉強したけど、どこに書けばいいの? そんな方必見!  おすすめ統合開発環境(IDE)

前書き

皆さんプログラミングしていますか?

ゆうゆるです!

 

progateドットインストールで勉強しても、

どこにプログラムを書けばいいかわからない

ことありませんか?

 

今回はpython版です。

 

あと、コードを記述するテキストエディターのおすすめも紹介します!

 

ぜひ最後まで見てみてください‼

 

目次

 

 

開発環境とは⁉

自分のパソコン上でプログラミングをするのは開発環境を作らないといけません。

いわゆる、「環境構築」をしないといけません。

 

でもその前に「開発環境ってなんなん?」って人もいると思うので、

解説していきます!

 

今回作るpythonの開発環境は、

プログラムを書く、テキストエディタ

それを実行するエディターが必要です!

 

例で説明すると…

木造の椅子をDIYで作りたいという場合、

のこぎりがいりますね!あと、金づちも!

 

道具をそろえて、作り始めることができる状態で、

開発環境が作れたことになります!

 

そして、道具を買いに行くという作業が、環境構築ですね!

 

これで、「開発環境」「環境構築」については理解できましたかね?

 

pythonの環境構築

pythonを使うには公式サイトから、pythonをインストールしないといけません!

 

では、インストールしに行きましょう!

1. こちら↓にアクセス

www.python.org

 

2. 「Download」から、右のPython 3.8.5」をクリック!

f:id:yuuyuru:20200919174558p:plain

 

3. ダウンロードされたexeファイル起動

「Add Python 3.8 to PATH」にチェックを入れる

「Install Now」をクリック!

f:id:yuuyuru:20200919175313j:plain

 

4. インストールが完了するのを待つ

f:id:yuuyuru:20200919175547j:plain

 

5. 出来たーー!

f:id:yuuyuru:20200919175630j:plain

 

pythonが使えるのかの確認

 

1. スタートメニューの検索で「cmd」と入力し、Enter

f:id:yuuyuru:20200919182245p:plain

 

2. python --versionと入力してEnter

f:id:yuuyuru:20200919182621j:plain

 

3. Python 3.8.5と出たらOKです!

f:id:yuuyuru:20200919182803j:plain

 

統合開発環境IDE)のダウンロード

Pythonの標準としてIDLEが入っていますが、

これから紹介する統合開発環境IDE)のほうが便利なので、

そちらを使うことをお勧めします!

 

Atom

Atomの長所

無料の追加拡張機能を追加できる!

一部の文字を入れるだけで全部表示できる予測変換がついている!

 

どちらもIDLEではできないです。

ダウンロード方法

f:id:yuuyuru:20200915214633j:plain

Atom ダウンロードリンク

1. 「Download」をクリック!

 

2. 待機中… now loading

f:id:yuuyuru:20200915214859j:plain

 

3. ダウンロード完了

 

起動方法

デスクトップのショートカットをクリック!

f:id:yuuyuru:20200915214954j:plain

 

右上のこれは「No,Never」で大丈夫です!

f:id:yuuyuru:20200915215245j:plain

 

日本語化

インストールからパッケージのインストール検索

「Japanese-menu」と入力!

一番上をインストール!

 

f:id:yuuyuru:20200919184453j:plain

 

インストール後はこのように、日本語になります。

f:id:yuuyuru:20200919184510j:plain

 

Atomからpythonを実行できるようにする

初期の状態では、pythonのファイルをAtomから実行できません。

 

なので、先ほどのように、インストールする必要があります!

 

atom-runner」と検索!

f:id:yuuyuru:20200919185310j:plain

 

2. これで完了です!

f:id:yuuyuru:20200919185356j:plain

 

Atompythonファイルを作る

1. ctrl + N で新規ファイルを作ります!

f:id:yuuyuru:20200919185622j:plain

 

2. ctrl + S で保存します!

   この時に拡張子を.pyに換えておきましょう!

 (拡張子とは .pngや.mp4などのファイルの後についているもの)

f:id:yuuyuru:20200919190042j:plain

今回は、test.pyにしておきました。

 

pythonの実行!

1. プログラムを書く。

f:id:yuuyuru:20200919191625j:plain

 

2. ctrl + S上書き保存

 

3. alt + R実行!

   左下にhello worldと表示されました!f:id:yuuyuru:20200919191804j:plain

 

文字化け回避

print("ハローワールド")

のように、日本語を表示させようとすると文字化けします。

これを直していきます!

f:id:yuuyuru:20200919192256j:plain


1. 「ファイル」から「起動スクリプトをクリック!

f:id:yuuyuru:20200919190921p:plain

 

2. int.coffeeというのが開くので

process.env.PYTHONIOENCODING = "utf-8";

 と入力して、ctrl + S保存

f:id:yuuyuru:20200919192853j:plain

 

3. Atom再起動

 

4. 出来たー!

f:id:yuuyuru:20200919193342j:plain

 

最後に

今回紹介した、Atomは、html&csspythonc#など、

そのほかにもたくさんのプログラミング言語を使えます!

 

簡単拡張機能の導入ができてとても便利なので

ぜひ使ってみてください!

 

 

【実体験あり】プログラミング1年やるとどこまでスキルがつくのか 感想~中学生~

はじめに

中学生プログラマー兼ブロガーの

ゆうゆるです!

 

そろそろ、プログラミングを勉強し始めてから1年がたちます!

 

Scratchも知らないパソコンもろくに触れない私が、

どのくらい1年で成長したかをまとめてみようと思います!

 

1年でどのくらい未経験が、成長できるか知りたい人は、

ぜひ見てみてください!

 

1年間頑張った結果

scratchという子供向けのプログラミングソフトも知らず

プログラミングとは全く無縁な生活をしていましたが…

 

 

1年後は、Unityでゲームを作れるようになりました!

このようなスクリプトも書けるようになりました!

f:id:yuuyuru:20200912180755j:plain

Pythonも少し使えるようになりました!

 

実体験

私は中学1年の時にプログラミングを初めて

現在に至るまで大体1年間を

プログラミングと共に過ごしました!

 

プログラミングを始めたきっかけ

学校の部活にいいのがなくて…

 

一番ましだったプログラミング部みたいなところに行ってみたことが

プログラミングに始めたきっかけです!

 

初めはパソコンをほとんど触ったことがなく、

Googleアカウント何それ?、

scratch何それ?って感じでした。

 

 

プログラミングに感動した!

友達がscratchをやったことがあるそうなので、

教えてもらいながら、シューティングゲームを作りました!

その時、スクリプト内容は全く理解していませんでしたが、

「自分でゲームを作れるんだ」とプログラミングに感動しました!

 

プログラミングに激はまりしたが、恐怖のあいつが…

感動を覚えてから3か月後、ここまではたまに迷っていましたが、順調に行っていました。

ですが、何で悩んでいたのかは忘れましたが、丸二日考えてもわからないことがあり、

 

恐怖の「挫折」を経験しました…

 

それから1か月くらいはプログラミングから離れました

 

でもある時「UNDERTALE」というゲームに出会いました!

 

undertaleは、聞いたことある人もいると思います!

このゲームは製作者が1人いわゆるインディーゲームなんです!

 

少人数でもこんな素晴らしいゲームが作れるのかと、希望に充ち溢れました

 

そこでもう一度、パソコンに向かって、プログラミングを始めることを決意しました!

 

それから3か月後…

scratchがけっこう使えるようになりました!!

完全に独学ですね!

 

そして、pythonを知りました。(これも部活です。マジで入っててよかった)

 

正直、始めてpythonのコードを見たとき、興味がわいてきました

 

でも初めて見たのはいいものの、まったくわかりませんでした笑

 

これは無理だと思いあきらめそうになりました

 

参考書を買った(Python

先輩から参考書を買ってみたらどうだろう言われ買ってみました!

 

買ったのはこちら↓の本です。

www.amazon.co.jp

python初心者の私でもわかりやすく解説されておりおすすめです!

 

わかるようになってきました!

 

最初のうちはどんどんわかって楽しかったです!

 

しかし、わからないことがまた出来て、

 

2回目の挫折でーす…笑

 

2回目の挫折と復帰

今回の挫折は長かったです…

2か月くらい挫折していました…

 

でも、部活に入っていました。

なので、自分用のパソコンを買ってもらいました!

 

これを機にもう一度始めることにしました。

 

そして、Unityでゲームが作れるようになるという目標を定めました

 

 

Pythonわかったぞ!

今年の3月ようやくちゃんとわかるように!

 

そこから、pythonでいろいろ作って5月になりました!

 

この時に決断しました!

 

来年の5月までに人に見せても恥ずかしくない作品を作って、Google Play Storeに公開しようと決めました!

 

この日から、毎日3時間くらいUnityについて勉強しました。

 

 

今年の6月…

unityの基本の使い方マスターしました。

そして、今回も、参考書を購入しました!

 

買った本がこちらです!

www.amazon.co.jp

通称、猫本ですね。

 

皆さんがおすすめされるように私もお勧めします!

とても分かりやすくて、初心者にはぴったりだと思います!

 

 

Amazonで見てみると、2020年版が出ているのでこちらを買うことをお勧めします!

現在の最新バージョンと対応しているのでね!

www.amazon.co.jp

 

これのおかげと、pythonやっていたのでc#の学習が比較的楽あったので、こんなに早くマスターできましたね!

 

今日…

文化祭の展示物をunityで作ったものを部長にOKか聞きに行くと、

すごく褒められてプログラミングを学んでよかったとすごーーく思いました!

諦めないでよかったと思いました!!

 

 

おすすめのプログラミング言語

私は、ゲーム開発というプログラミングの種類について勉強しました。

それ以外にも、システム開発や、Web開発などいろいろな種類があります。

それぞれのおすすめについて説明していきます。

 

ゲームプログラマー

1位 javascript

2位 c#

3位 c++

 

1位は比較的簡単なjavascriptです。まずこれを学んでみましょう!

 

2位はc#これは、unityをしたい人は必須です!

 

3位はc++これは、c#との互換性はございません。

難しいのでプログラミングがだいぶわかってからすることをお勧めします!

 

webプログラマー

1位 html&css

2位 javasript

3位 java

 

1位はhtml&cssこれはweb開発にはほぼ必須といってもいいほどの基礎の言語です!

 

2位はjavascriptこれもweb開発では絶対に覚えておきたい言語です。

 

3位はjavaこれが使えるとプログラミングの基礎が分かったのと同じだと思いますよ!

 

プログラミングをやってみようという方

最初はjavaを学ぶことをお勧めします。

 

プログラミングの基礎が詰まっています。

 

最初基礎を学ぶべきですからね!

 

その際参考書を買うことをお勧めします。

自分だけでは難しいです。

 

その際にこちら↓の参考書がおすすめです

www.amazon.co.jp

 

絵で解説されていて、初心者でもわかりやすいですよ!

 

プログラミング頑張ってくださいね!!

 

 

 

 

scratchでアクションゲームを作ろう!初心者用 part.3 ~ステージ遷移, 死亡の仕組み~【プログラミング】

 

前書き

最近暑さも引いてきて少しマシになってきましたね!

 あと、今回から目次付けます!

 

今回で3part目になった「アクションゲームを作ろうシリーズ」ですが

今回は…

 

 

「ステージ遷移」「死亡の仕組み」です!

(まあタイトル見ればわかるんですが……)

 今回は前回までよりも簡単だと思いますよ!

 

それでは行きましょう!!

 

目次

 

 

今回作成したプロジェクト

 

ステージ遷移とは

 

わかる方は次へ

 

名前からなんとなくわかると思いますが

 

プレイヤーがクリアするなどのある特別な行動をしたときに

ステージを移動(変える)こと。

 

 

言葉では、わかりにくいと思います…

(自分でもわくりにくいなと思います…)

 

 

ので、画像を使って説明しますね!

 

1. まず、スタートするとここに出て… 

f:id:yuuyuru:20200916190508j:plain

 

2. ここに行ったとき(x座標がここを超えたとき)にステージ遷移するf:id:yuuyuru:20200917213658j:plain

今回だったらこのような仕組みになり、

 

特別な行動に当たるのは、

(x座標がここを超えたとき)

ということですね!

 

※こういう特別な行動をトリガーといいます。

 覚えておきましょう!

 

ステージ遷移のプログラム

今回のプログラムはこちらです!

f:id:yuuyuru:20200917220621j:plain

それぞれについて解説していきますね!

 

1. 初期設定

f:id:yuuyuru:20200917221350j:plain

まずは、初期設定と書いている右上のところを見ます!

 

 

ステージを0にするというのが追加されています!

今回のステージ変数というのは…

 

 

ステージ=0の時  ステージを最初のにする。

ステージ=1の時  ステージを二番目のにする。

ステージ=2の時  ステージを三番目のにする。

 

 

このような感じで、変数に応じてステージを変えるという感じにしています。

 

なので、初期設定のステージを0にするというのは

 

スタートしたとき最初のステージに戻すということです!

 

2. トリガー(特別な行動)

f:id:yuuyuru:20200917221635j:plain

次にどのようにしたら、ステージが変わるのかについてです。

 

さっきも言ったけど、トリガーといいます

 

今回はそのトリガーというのがx座標が230以上になったときになっています。

 

この条件が満たされたときにステージが変わるように

「ステージを1ずつ変える」で次のステージに遷移しています。

 

 

「x座標をー190、y座標をー70にする」というのは、ステージが変わったときに、

初めの位置に戻しています。

 

※ずっと、x座標が230以上になったときという条件を常に満たしてしまうので

 初めの位置に戻すようにしましょう!

 

3. ステージを変えるときに地面マップを変える。

 

f:id:yuuyuru:20200917223106j:plain

ステージはこのようにスプライトで分けています

 

ステージという変数が0の時は、ステージ0を表示して、

ステージ1を隠しています。

 

ステージという変数が1の時は、ステージ1を表示して、

ステージ0を隠しています。

 

f:id:yuuyuru:20200917223521j:plain

ステージが1ならメッセージとして「ステージ1」を送るようにしています。

 

 

そしてステージ0のスプライトのプログラムは下記のものになります。

f:id:yuuyuru:20200917223851j:plain

これは先ほど説明したようにスタートで表示、

 

「ステージ1」を受け取ったとき隠すようにして

変数のステージ=0の時にだけ

スプライトのステージ0が表示できるようにしています。

 

 

そしてステージ1のスプライトのプログラムは下記のものになります。

f:id:yuuyuru:20200917224522j:plain

これは先ほどのとは逆で、スタートで隠して、

「ステージ1」を受け取ったとき表示するようにして

変数のステージ=1の時にだけ

スプライトのステージ1が表示できるようにしています。

 

これで、ステージ遷移の仕組みは完了です!!

 

死亡の仕組み

今回の死亡の仕組みこちらになります!

f:id:yuuyuru:20200917225018j:plain

これだけです!

 

解説していきます!

 

まずは、下のほうの「y座標が-170以下になったとき」に、

「x座標をー190、y座標をー70にする」というのは…

 

穴に落ちたときに初期位置に戻る(死亡判定)という、

穴に落ちたとき専用の死亡判定です!

 

 

次に、上の「赤色に触れたとき」に、

「x座標をー190、y座標をー70にする」というのは…

 

敵に当たったときに初期位置に戻る(死亡判定)という、

敵に触れたときの死亡判定です!

 

これで死亡判定も完了ですね!!

 

最後に

 今回で、大体の仕組みが完成しました。

次は、敵を作ります!

 

穴に落ちたときだけ死ぬのはつまんないですからね!!

次回は今回より少し難しいかもですが頑張りましょう!!

 

Twitterも始めたので是非チェックしてみてください!!

twitter.com

 

 

 

 

html&css勉強したけど、どこに書けばいいの?  おすすめ統合開発環境(IDE)3選【Windows10】

 

前書き

皆さん、プログラミングしていますか⁉

 

progateドットインストールで勉強しても、

どこにプログラムを書けばいいかわからない

ことありませんか?

(私も実際、pythonで悩みました…)

 

それはいいとして

今回はHTML&CSS版です。

 

あと、コードを記述するテキストエディターのおすすめも紹介します!

 

ぜひ最後まで見てみてください‼

 

目次

 

 

HTML&CSSに必要な環境

webページを開発するために必要なのは…

 

テキストエディター」ブラウザーが必要です!

 

って言われてもさっぱりなのでそれぞれ説明します。

 

統合開発環境IDE

いわゆる「プログラムを書く場所」です。

ここに.htmlや.cssのプログラムを書けます

 

ブラウザー

先ほどのIDE」で書いたプログラムを使い、

webページも表示するツールです。

 

ブラウザーのダウンロード

おすすめのブラウザー

 この中のどれかを使うことをお勧めします。

 

今回はGoogle Chromeダウンロードについて説明します。

Google Chrome ダウンロード

1. ↑こちらに飛びます。

 

2. Chromeをダウンロード」をクリック!

f:id:yuuyuru:20200915200527j:plain

 

3. ChromeSetup.exeというダウンロードされたexeファイルを起動させます。

 

4. Chromeのダウンロードインストール開始されます。

f:id:yuuyuru:20200915200827j:plain

 

5. これで完了です!

 

IDEのダウンロード

 Sublime Text

ダウンロード方法

こちらのページにアクセス

( Sublime Textダウンロードページ)

f:id:yuuyuru:20200915205338j:plain

windows 32bitの方はwindowsをクリック!

windows 64bitの方はwindows 64 bit」をクリック!

 

インストール方法

1. ダウンロードされたexeファイルを起動する

 

2. ダウンロード先のフォルダーを指定します。(このままでいいと思います)

f:id:yuuyuru:20200915210518j:plain

 

3. Add to explorer context menu というのにチェックするかしないかを選択します

f:id:yuuyuru:20200915210745j:plain

Add to explorer context menuオンにすると

右クリックしたときにOpen with Sublime Textが出ます。

f:id:yuuyuru:20200915211316p:plain

 

4. 「インストール」をクリック!

f:id:yuuyuru:20200915211613j:plain

5. Finish!

f:id:yuuyuru:20200915211847j:plain

起動方法

1. 先ほどダウンロードしたところ

sublime_text.exeというexeファイル起動します。

(exeファイルのショートカットをデスクトップに追加しておく

 または、タスクバーにピン止めすることをお勧めします!)

 

f:id:yuuyuru:20200915212548j:plain

2. 右下Plain TextHTMLを書く場合はHTML

      CSSを書くときはCSSを選択しましょう!f:id:yuuyuru:20200915212531j:plain

3. ViewShow Consoleをクリック!

 

f:id:yuuyuru:20200915213759p:plain

4. 下記のpythonのscriptを入力してEnterをクリック!

 

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

f:id:yuuyuru:20200915214049j:plain

 

f:id:yuuyuru:20200915214028j:plain

 

3. Shift + Ctrl + p「Install Package Control」検索

   一番上Package Control: Install Packageを選択してEnter

f:id:yuuyuru:20200915212829j:plain

4. html5を検索して一番上をクリック!

f:id:yuuyuru:20200915213222j:plainこれで、すべて完成です!

Atom

ダウンロード方法

f:id:yuuyuru:20200915214633j:plain

Atom ダウンロードリンク

1. 「Download」をクリック!

 

2. 待機中… now loading

f:id:yuuyuru:20200915214859j:plain

 

3. ダウンロード完了

 

起動方法

デスクトップのショートカットをクリック!

f:id:yuuyuru:20200915214954j:plain

 

右上のこれは「No,Never」で大丈夫です!

f:id:yuuyuru:20200915215245j:plain

 

設定方法

インストールからパッケージのインストール検索

「Emmet」と入力!

一番上をインストール!

※これはHTML/CSSのコーディングを素早くするもの

f:id:yuuyuru:20200915215525j:plain

 

HTML/CSSファイルを作る方法は

 

 1. 右クリックして「新規ファイル」をクリック!

f:id:yuuyuru:20200915220515p:plain

 

f:id:yuuyuru:20200915220659p:plain

 

3. 名前と拡張子を書く(.html / .css

f:id:yuuyuru:20200915220741p:plain

4. これで書き始められます!

 

Visual Studio Code

ダウンロード方法

Visual Studio IDE、コード エディター、Azure DevOps、App Center - Visual Studio

1. こちらにアクセス

 

2. Visual Studio CodeWindows x64」をクリック!

f:id:yuuyuru:20200915222205p:plain

3. ダウンロード完了

f:id:yuuyuru:20200915222437p:plain

インストール方法

1. 使用許諾契約書同意する。

f:id:yuuyuru:20200915222601j:plain

 

2. visual studio codeインストール先指定(最初に書いていたもので大丈夫)

f:id:yuuyuru:20200915222910j:plain

 

3. ショートカットの作成先。(このままでいい)

f:id:yuuyuru:20200915223119j:plain

 

4. 「デスクトップ上にアイコンを作成する」だけで大丈夫かな

f:id:yuuyuru:20200915223204j:plain

 

5. インストール! now loading

f:id:yuuyuru:20200915223306j:plain

 

6. 完了!!

f:id:yuuyuru:20200915223409j:plain

 

設定方法

1. 拡張機能から「Japanese Language Pack」と検索して一番上をインストール!

f:id:yuuyuru:20200915223508j:plain

 

2. 「ファイル」から「新規ファイル」をクリック!

f:id:yuuyuru:20200915223858p:plain

 

3. Ctrl + Sファイルを保存します。その時に、.txtを.html/.cssに変えましょう

 

4. これで書けますね!

 

htmlファイルをブラウザーで開く

先ほど紹介したテキストエディタを使ってhtmlファイルを作ったら

それを開く方法について説明します。

 

1. htmlファイルを右クリックしてます。

   プログラムから開くよりGoogle Chromeをクリック!

   または、開くをクリック!

f:id:yuuyuru:20200916211132p:plain

 

2.  開くことができました!

f:id:yuuyuru:20200916211832j:plain

(なぜゴリラか、は謎です…)

順位

(これはあくまで私の順位になります。)

3位  Sublime Text

 

 

2位 Visual Studio Code

 

 

1位 Atom

こうなりました!

 

1位と2位拡張機能のインストールが簡単でした。

私のような初心者にはお勧めできますね!

 

終わりに

私は、これからAtomを使ってみようと思います。

 

けっこうAtomが自分にはまって好きになりましたね。

 

みんなも使ってみてね!

 

scratchでアクションゲームを作ろう!初心者用 part.2 ~ジャンプや左右の移動、重力~【プログラミング】

前回のパート1から始めたアクションゲーム開発の更新です!

前回の作業

  • 重力の追加
  • 右矢印キーと左矢印キーでの移動の導入
  • ジャンプの導入
  • 移動範囲の制限

前回はこの4つを作りました。今回したいことは…

 

左右の当たり判定すり抜けないようにします。

言葉で言っても伝わりにくいと思うのでこちら↓の動画を見てください!

 

 下からあたるとすり抜けてしまいます。

そして横から通ってもすり抜けてしまいます。

 

今回はこれを改善したいと思います!!

 

下からあたるとすり抜けてしまう問題

今回は色で判断したいと思うので…

土の色草の色を分けようと思います。

f:id:yuuyuru:20200913205954j:plain

問題解決のプログラムはこちらです!

 

f:id:yuuyuru:20200913210414j:plain

予想より少なくないですか?

それはいいとして…

解説していきます!

黒色茶色に触れたときつまり、プレイヤーが土に触れたときということです。

「y座標を-20ずつ変える」というのは

こちら↓のジャンプ処理の「y座標を20ずつ変える」に依存しています

f:id:yuuyuru:20200913210848j:plain

これでこの問題は解決ですね!

 

横からすり抜ける問題

これも色で判断したいので、色々変えないといけません…

 

1. プレイヤーの色をこのように変えます

f:id:yuuyuru:20200913214724j:plain

2. 浮いている地面に黒枠をつける

 

f:id:yuuyuru:20200913214914j:plain

3. 移動のプログラムに入力の変数を追加する!

f:id:yuuyuru:20200913215121j:plain

4. 黒が黒に触れたならに変える。

f:id:yuuyuru:20200913215415j:plain

. 今回追加するプログラム。

f:id:yuuyuru:20200913215656j:plain

これで全部です!(つかれたぁ…)

それでは解説していきます!

 

まずは4から

もともとはからだったのですが、から黒(プレイヤーから地面)にしました。

なぜなら、5のプログラムを実行するときに不具合が起こるので、2で黒枠を作りました。

 

次に5の解説!

初めの緑色茶色に触れたとき(プレイヤーの正面が土に当たったとき)というものと、緑色緑色に触れたとき(プレイヤーの正面が草に当たったとき)というものでそれぞれを分けて処理しました。

そして、2でした処理は、右向きになったとき入力という変数を0として、左向きになったとき入力という変数を1とします。

これによって左右どちらからの当たり判定もできるようにしています。

 

正直このプログラムには満足していないので改善しようと思います。

うまく説明できなくてすいません

 

今回完成したのがこちらです。

 

https://scratch.mit.edu/projects/425114052

(リミックス用)

 

最後に

今回のプログラムはもうちょっと改善できるかなと思うので、これ以降のpartで改善されるかもしれません。

お待ちください。

前のブログで次は画面移動やステージ作成をするといったのですが今回できなかったので次回に回そうと思います!

次のブログをお待ちください

scratchでアクションゲームを作ろう!初心者用 part.1 ~ジャンプや左右の移動、重力~【プログラミング】

今回からアクションゲームの作り方について解説します。

ゲームと言ったらマリオみたいな2Dアクションゲームを想像する方も多いと思います。

でも、scratchをやり始めて間もない方だと、

「重力ってどうするの?」

「ジャンプって難しそう…」

など思うと思いますが、今回できるだけわかりやすく解説していこうと思います!

 

今回作るサンプル

まず、今回作るものは、このようなものです!

 

スペースキー : ジャンプ

右向き矢印  : 右に移動

左向き矢印  : 左に移動

https://scratch.mit.edu/projects/425036589

(ここから↑リミックスできます!)

本当に単純なものなので、重力だけを付けたいという場合などにも使ってみてください!

 

スクリプト解説

スクリプトは全部でこれだけです!

 

f:id:yuuyuru:20200913094732j:plain

 

1. まず簡単な左右移動についてです

f:id:yuuyuru:20200913095031j:plain

 

まず、最初の疑問として「回転方法を…」というものだと思います。

これが入れていない場合です。

f:id:yuuyuru:20200913095701j:plain

ひっくり返ってしまっています…

 

しかし「回転方法を…」というもの入れることで、上下の反転をなくし、

左右だけの反転にすることができます

 

回転を、0以上、180度以下にすると右90度に向くようになり

回転を、0未満、-180度以上にすると左90度に向くようになります。

 

あとは、右向き矢印が押されるx座標を10プラスするという感じでわかると思います!

 

2. 次は重力の設定です

f:id:yuuyuru:20200913101255j:plain

まず、黒色緑色に触れたときというは、黒はプレイヤーということだと思ってください。

 

そして、緑は地面の色です。

 

ということは、黒色緑色に触れたときというのはプレイヤーが地面に立っているときということになります。その時は何もしないようになっています。

 

空中に浮いているとき(でなければ)はy座標を下げて重力を再現しているということです!

 

3. 次はジャンプ!

f:id:yuuyuru:20200913124302j:plain

先ほどの黒色緑色に触れたときという中は地面に触れているときにしか呼ばれないのでそこに地面に触れていないとできないジャンプをここに入れています!

 

そして、ジャンプの仕組みとしては、

6回に分けてy座標をプラスしてします。

それは、一気に行ってしまうとワープみたいになってしまうので6回に分けています。

それだけですw

落ちるのは重力に任せております。

 

4. 移動範囲を制限する!

f:id:yuuyuru:20200913125856j:plain

なぜ、こんなことをするのかというと、今回はしなくてもいいのですが、

バグを誘発しないようにしておくことをお勧めします。

 

5. 初期設定

f:id:yuuyuru:20200913131801j:plain

最初にスタートする場所を設定しています。

変数を使う場合なども最初に初期化するほうがいい場合もあります。

 

最後に

今回はジャンプや重力など基本の操作仕組みを作りました。

次回は、画面移動やステージ作成などについてやっています。

まっててね!!

 

ブログ初心者なのでアドバイスなどあればお願いします