プログラマのブログ

プログラマのブログ

考えたこと。調べたこと。

【Scratch】ゲームオーバー【5作品目】

こんにちは。
プログラマーのじゅんです。

Scratch3.0を勉強をしています。

今回はゲームオーバー画面を作成しました。
ゲームを作るうえで、重要な要素の1つですね。
・敵にやられた時
・タイムアップした時
にゲームオーバー画面を表示すると、グッと本格的になります。

ということで、
スプライトをクリックすると、ゲームオーバーの文字を表示する
というプログラムを作成しました。

完成形は以下です。
(所要時間は30分程でした)
f:id:programmer-jun:20190612084221g:plain


プログラミング手順

1. 新しいプロジェクトを作成します。

・新しいプロジェクトを開きます
f:id:programmer-jun:20190611085552p:plain

2. ゲームオーバー用のスプライトを作成します。

・「描く」をクリック
f:id:programmer-jun:20190611085625p:plain
・新規スプライトが追加され、コスチューム画面が開きました
f:id:programmer-jun:20190611085640p:plain

3. ゲームオーバーの文字を作ります。

・「テキスト」をクリック
f:id:programmer-jun:20190611085653p:plain
・描画エリアをクリックし、キーボードで「GAMEOVER」の文字を入力
f:id:programmer-jun:20190611085704p:plain
・フォントは好きなものを選択(ここではPixelを選択しました)
f:id:programmer-jun:20190611085715p:plain
・スプライト名、座標、大きさを調整
f:id:programmer-jun:20190611085740p:plain

4. 猫のプログラムを作成します。

・猫のスクリプトエリアに、以下のプログラムを作成
f:id:programmer-jun:20190611124808p:plain
・メッセージを追加(新しいメッセージをクリック)
f:id:programmer-jun:20190611124752p:plain
・メッセージ名を「ゲームオーバー」に変更
f:id:programmer-jun:20190611125216p:plain
・クリックした時に、「ゲームオーバー」というメッセージを送るプログラムが完成しました
f:id:programmer-jun:20190611125232p:plain

5. ゲームオーバーのプログラムを作成します。

・以下のプログラムを作成
f:id:programmer-jun:20190611125248p:plain

6. 実行してみます。

・猫をクリックすると、ゲームオーバー文字が表示されます


7. 改造してみました。

・コウモリに当たると、ゲームオーバーが表示されます
f:id:programmer-jun:20190612084245g:plain
▼ドラゴンのプログラムは以下です
f:id:programmer-jun:20190611125502p:plain
▼雷のプログラムは以下です
f:id:programmer-jun:20190611125513p:plain
▼コウモリのプログラムは以下です
f:id:programmer-jun:20190611125523p:plain
▼ゲームオーバーのプログラムは以下です

f:id:programmer-jun:20190611125535p:plain

感想

今回は、ゲームオーバー画面を表示する方法を試してみました。

冒頭でも述べましたが、ゲームオーバー画面があると、グッとゲームらしくなります。
ゲームオーバー画面を見ると悔しさが込み上げてきて、
「もう一度挑戦しよう!」
という気持ちになります。

手順7の改造は、ドラゴンの飛び方や、コウモリの点滅など、少しこだわってみました。
やっぱり自分で作ったゲームで遊ぶのは、とても楽しいですね。
遊んでいるうちに、
「面白くするには、どうすれば良いかな…」
「難しくするのは、どうすれば良いかな…」 と、色々考えます。

プロが作った、クオリティの高いゲームで遊ぶのも楽しいですが、
自分で作った不格好なゲームで遊ぶのも良いものだなと思いました。

今回は以上です。

【Scratch】コスチュームを変える【4作品目】

こんにちは。
プログラマーのじゅんです。

Scratch3.0を勉強をしています。

今回はスプライトのコスチュームを変えるプログラムを作成しました。
コスチュームとは見た目の事です。
要は、何かしらイベントが発生した際に、見た目を変えるということです。

ゲームを作るうえで、このようなプログラムを使う場面は多々あります。
例えば
・マウスクリックした時に、見た目を変える
・敵からダメージを受けた時に、自分のキャラクターを点滅させる
・敵を倒した時に、敵を爆発させる
などなど考えられますね。

ということで、
・マウスカーソルがケーキに触れると、ケーキの火が消える
というプログラムを作成しました。

完成形は以下です。
(所要時間は15分程でした)
f:id:programmer-jun:20190603083455g:plain


プログラミング手順

1. 新しいプロジェクトを作成します。

・新しいプロジェクトを作ります
f:id:programmer-jun:20190531085749p:plain
・猫のスプライトは不要なので、×マークをクリックして削除します
f:id:programmer-jun:20190531085811p:plain
・消えました
f:id:programmer-jun:20190531085825p:plain

2. ケーキのスプライトを追加します。

・「スプライトを選ぶ」をクリック
f:id:programmer-jun:20190531125614p:plain
・「Cake」をクリック
f:id:programmer-jun:20190531125629p:plain
・ケーキが追加されました
f:id:programmer-jun:20190531125642p:plain

3. ケーキの位置、大きさを調整します。

・X座標、Y座標を0に設定
・大きさを200に設定
f:id:programmer-jun:20190531125657p:plain

4. ケーキのコスチュームを確認してみます。

・コスチュームタブをクリックして、コスチュームを確認
(コスチュームが2つあることが分かります)
f:id:programmer-jun:20190531125718p:plain
・2番目は、火が消えたコスチュームです
f:id:programmer-jun:20190531125837p:plain

5. ケーキのプログラムを作成します。

・コードタブをクリックし、以下のプログラムを作成
f:id:programmer-jun:20190531125851p:plain

6. 実行してみます。

・マウスカーソルがケーキに触れると、ケーキの火が消える


7. 改造してみました。

・右からコウモリが飛んでくる
・方向キーで、ドラゴンの移動
・スペースキーで、ドラゴンから雷発射
・雷がコウモリに触れると、コウモリの見た目が変化する

▼ドラゴンのプログラムは以下です
f:id:programmer-jun:20190603082158p:plain
▼雷のプログラムは以下です
f:id:programmer-jun:20190603082214p:plain
▼コウモリのコードは以下です
f:id:programmer-jun:20190603082227p:plain


感想

手順7の改造は、横スクロールのシューティングゲームをイメージしながら作りました。

といっても一から作ったのではなく、1作品目~3作品目のプログラムを組み合わせて、サクッと作ったものです。
過去に作った小さな部品を組み合わせて、作品を作り上げるということですね。

実際のソフトウェア開発でも、既にある部品を組み合わせていくという考え方はとても重要です。
なぜならば、過去の資産を積極的に活用することで、良いものを早く作る事ができるからです。

Scratchの「バックパック機能」を使えば、過去の資産を使う感覚を学ぶことができますね。
とても良い機能だと思うので、存分に使い倒しましょう。

今回は以上です。

【Scratch】弾を発射【3作品目】

こんにちは。
プログラマーのじゅんです。

Scratch3.0を勉強をしています。

今回は、弾を発射するプログラムを作成しました。
シューティングゲームを作る時に使えますね。

所要時間は20分程でした。

完成形は以下です。
f:id:programmer-jun:20190524201659g:plain


プログラミング手順

1. 新しいプロジェクトを作成します。

f:id:programmer-jun:20190524195701p:plain

2. 弾のスプライトを追加します。

・「スプライトを選ぶ」を選択
f:id:programmer-jun:20190524195720p:plain ・「Ball」を選択
f:id:programmer-jun:20190524195736p:plain
・猫の隣に、スプライトが追加されました
f:id:programmer-jun:20190524195803p:plain

3. 「Ball」のプログラムを作ります。

[プログラムの概要]
・実行ボタンが押されたら、Ballを隠す
・スペースキーが押されたら、Ballを猫の位置に移動し表示
・画面上端に着くまで、Y座標を増やしていく
・画面上端に着いたら、Ballを隠す
f:id:programmer-jun:20190524195818p:plain

4. 実行してみます。

・スペースキーを押すと、猫からボールが発射されます

f:id:programmer-jun:20190524202010g:plain

5. 猫を方向キーで動かせるようにしてみましょう。

・1作品目(方向キーで上下左右に動かす)のプロジェクトを開く f:id:programmer-jun:20190524195835p:plain
バックパックをクリックして開き、プログラムをコピー
f:id:programmer-jun:20190524195846p:plain
・先程のプロジェクトを開き、猫のスプライトを選択(手順4でのプロジェクト)
f:id:programmer-jun:20190524195920p:plain
バックパックをクリックして開き、先ほどコピーしたプログラムを取り出す f:id:programmer-jun:20190524195933p:plain

6. 実行してみます。

・方向キーで猫が移動
・スペースキーでボール発射


7. 改造してみました。

f:id:programmer-jun:20190524201303g:plain

感想

今回はキーボードを押すと弾を発射するプログラムを作成しました。
攻撃ができるようになると、一気にゲーム感がでますね。
あとは
・当たり判定 ・スコア
・ゲームオーバー
などを作り込めば、良い感じのゲームが出来そうな気がしています。

今回は以上です。

【Scratch】ランダムに上から落下【2日目】

こんにちは。
プログラマーのじゅんです。

Scratch3.0を勉強をしています。

今回は、スプライトを落下させるプログラムを作成しました。
所要時間は5分程でした。

完成形は以下です。
f:id:programmer-jun:20190517193449g:plain


プログラミング手順

  1. 新しいプロジェクトを作成します。
    f:id:programmer-jun:20190517192731p:plain

  2. スプライトを移動させるには、座標を指定する必要があります。
    画面の座標がどうなっているかを確認してみましょう。
    ・「背景を選ぶ」を選択
    f:id:programmer-jun:20190517192751p:plain
    ・「Xy-grid」を選択
    f:id:programmer-jun:20190517192805p:plain
    ・X座標は-240~+240、Y座標は-180~+180となっていることが確認できます
    f:id:programmer-jun:20190517192818p:plain

  3. 落下するプログラムを作ります。
    ・ブロックパレットからブロックを取り出し、以下のプログラムを作成
    ・X座標は-230~+230までの乱数
    ・Y座標は+170~-170まで変化
    f:id:programmer-jun:20190517192838p:plain

  4. 実行してみます。猫が画面の上から下に移動しています。

5.応用し、サメがランダムに出てくるプログラムを作ってみました。
敵を避けるゲームに使えそうですね。 f:id:programmer-jun:20190517193800g:plain

感想

座標を説明するための背景画像が用意されているなんて、なんと親切なのでしょう。
口頭で「X座標の範囲は~」と説明するよりも、画像を見れば一発で理解できますね。
そろそろゲーム作ってみようかなと思います。

【Scratch】方向キーで上下左右に動かす【1日目】

こんにちは。
プログラマーのじゅんです。

2020年に小学校でプログラミング教育が必修化されますね。
子供からの尊敬を我が物にするために、Scratchの勉強を始めました。

手始めに、スプライト(キャラクター)を上下左右に動かすコードを作成しました。
所要時間は5分程でした。

完成形は以下です。
・画面クリックで実行
・方向キーでロボットが上下左右に動く
(Scratchのバージョンは3.0)


プログラミング手順

  1. 新しいプロジェクトを作成すると、以下の画面が表示されます。
    f:id:programmer-jun:20190515214203p:plain

  2. 画面の各部の名称は以下のようになっています。
    f:id:programmer-jun:20190515214230p:plain

  3. コードを作っていきます。
    ・ブロックパレットのにあるコードブロックを、スクリプトエリアにドラッグし、以下を作成
    f:id:programmer-jun:20190515214306p:plain

  4. 猫を動かしてみます。
    ・実行ボタンをクリック(緑の旗マーク)
    ・方向キーを押すと、猫が動く
    f:id:programmer-jun:20190515214324p:plain

  5. 猫以外のスプライトも動かしてみましょう。
    ・猫のスプライトを非表示に
    バックパックボタンを押す
    ・開いたバックパックに、コードをコピー
    f:id:programmer-jun:20190515214343p:plain

  6. スプライトを追加します。
    f:id:programmer-jun:20190515214358p:plain

  7. ロボットを選択します。
    f:id:programmer-jun:20190515214413p:plain

  8. ロボットが追加されました。
    f:id:programmer-jun:20190515214430p:plain

  9. バックパックからコードを取り出し、実行すると、上下左右に動かすことができます。
    f:id:programmer-jun:20190515214448p:plain

感想

マウスだけで直感的にプログラミングができるので、小学生でも簡単に使えそうですね。
基本的な構文(条件分岐、イベント、ループなど)は記述可能なので、頑張れば本格的なプログラミングができそうです。
今回のような簡単な動作を行う部品を複数作っていき、部品を組み合わせてゲームを作っていこうと思います。

【blender】歯車のモデリング【4日目】

こんにちは。
プログラマーのじゅんです。

blenderを使い、3DCGの勉強をしています。

今回は歯車のモデリングを行いました。
所要時間は10分程でした。

完成イメージは以下です。

f:id:programmer-jun:20190508082027p:plain

モデリング手順

  1. 起動後の初期画面です。
    f:id:programmer-jun:20190508082052p:plain

  2. カメラ、ライト、立方体を削除します。
    Aキーで全選択
    Xキーで削除
    f:id:programmer-jun:20190508082105p:plain

  3. 視点を真上に変更します。
    ・テンキーの7を押下
    f:id:programmer-jun:20190508082118p:plain

  4. 円を追加します。
    Shiftキー + Aキー で追加メニューを表示し、[メッシュ] - [円]を選択
    ・オペレータで、頂点数を48に設定
    f:id:programmer-jun:20190508082149p:plain

  5. 編集モードに切り替えます。
    Tabキーを押下
    f:id:programmer-jun:20190508082214p:plain

  6. 円の頂点を1つおきに選択します。
    Shiftキーを押しなら右クリック
    f:id:programmer-jun:20190508082227p:plain

  7. 拡大縮小し、ギザギザにします。
    Sキーで適当な位置に拡縮し、 左クリックで確定
    f:id:programmer-jun:20190508082239p:plain

  8. 辺を削除し、頂点のみ残します。
    Aキーで全ての頂点を選択
    Xキーで削除メニュー表示し、[辺と面のみ]を選択
    f:id:programmer-jun:20190508082252p:plain

  9. 頂点のみが残りました。
    f:id:programmer-jun:20190508082302p:plain

  10. 頂点を複製し、回転します。
    Aキーで全ての頂点を選択
    Shiftキー + Dキー で複製を実行
    Rキー - 5キーで、5度回転
    f:id:programmer-jun:20190508082314p:plain

  11. 面を作成します。
    Aキーで全ての頂点を選択
    Fキーで辺、面作成を実行
    f:id:programmer-jun:20190508082333p:plain

  12. 面を分割します。
    ・[メッシュ]-[面]-[扇状に分離]を選択
    f:id:programmer-jun:20190508082345p:plain

  13. 分割されました。
    f:id:programmer-jun:20190508082401p:plain

  14. 押し出します。
    Eキーで押し出しを実行(Zキーで押し出し方向をZ方向に固定)
    f:id:programmer-jun:20190508082412p:plain

  15. 完成しました。
    f:id:programmer-jun:20190508082427p:plain

  16. 穴をあけて、複製してみました。
    f:id:programmer-jun:20190508082438p:plain

感想

GWの10連休で、勉強に間が空いてしまいました。
リハビリとして、サクッとモデリングできるものを選びました。
丸みを帯びていない、直線的な形状は割と楽にモデリングできそうです。
ただ、キャラクターや人物となると…現時点ではとてもできる気がしません(笑)
継続して学習することで、スキルを上げていければと思います。
何度も使うショートカットキーは、自然と覚えられてきました。

学んだこと

・Fで辺、面の作成
・複製(Shiftキー+Dキー
ブーリアンでの穴あけ

【blender】マグカップのモデリング【3日目】

こんにちは。
プログラマーのじゅんです。

blenderを使い、3DCGの勉強をしています。

今回はマグカップモデリングを行いました。
所要時間は50分程でした。

完成イメージは以下です。

f:id:programmer-jun:20190426191656p:plain

モデリング手順

  1. 起動後の初期画面です。
    f:id:programmer-jun:20190426191740p:plain

  2. 今回のモデリングに不要なものを消していきます。(手順2~4)
    Aキーで全選択(立方体、カメラ、ライトを選択状態に)
    f:id:programmer-jun:20190426191759p:plain

  3. Xキーで削除します。
    f:id:programmer-jun:20190426192310p:plain

  4. 消えました。
    f:id:programmer-jun:20190426192324p:plain

  5. カップの形状を作っていきます。
    まず円柱を追加します。
    Shiftキー + Aキーで追加メニュー表示
    ・[メッシュ]-[円柱]を選択
    f:id:programmer-jun:20190426192338p:plain

  6. 追加した円柱を調整します。
    オペレータで以下に設定します。
    ・深度:2.4
    ・ふたのフィルタイプ:三角の扇形
    f:id:programmer-jun:20190426192350p:plain

  7. カップの口を作るために、上面を削除していきます。(手順7~10)
    Tabキーで編集モードに切り替え
    ・「頂点選択」に切り替え。
    f:id:programmer-jun:20190426192405p:plain

  8. 円の真ん中の頂点を選択します。
    f:id:programmer-jun:20190426192421p:plain

  9. 「Xキー」で頂点を削除します。
    f:id:programmer-jun:20190426192433p:plain

  10. 上面が消えました。
    f:id:programmer-jun:20190426192444p:plain

  11. カップの下面に丸みをつけていきます。(手順11~13)
    Altキーを押しながら辺を右クリックし、ループ選択
    f:id:programmer-jun:20190426192456p:plain

  12. 面取りをします。
    Ctrlキー + Bキーでベベルを実行
    f:id:programmer-jun:20190426192511p:plain

  13. ベベルのパラメータを調整します。
    オペレータで以下に設定します。
    ・量:0.3
    ・セグメント:3
    f:id:programmer-jun:20190426192523p:plain

  14. カップに厚みを付けます。
    ・[モディファイアー]-[追加]-[厚み付け]
    f:id:programmer-jun:20190426192536p:plain

  15. 幅を0.12に設定。
    f:id:programmer-jun:20190426192548p:plain

  16. トーラスを追加していきます。 (手順16~17)
    Shiftキー + Cキー で3Dカーソルをワールドの原点に
    Shiftキー + Aキー で追加メニューを表示
    ・[トーラス]を選択
    f:id:programmer-jun:20190426192600p:plain

  17. 追加したトーラスを調整します。
    オペレータで以下に設定します。
    ・位置
     ・X:0.9
     ・Y:0.0
     ・Z:0.1
    ・回転
     ・X:90
     ・Y:0
     ・Z:0
    ・大セグメント数:36
    ・小セグメント数:8
    ・大半径:0.7
    ・小半径:0.13
    f:id:programmer-jun:20190426192615p:plain

  18. 視点を変更し、正面から見えるようにします。
    ・テンキーの 1 で正面に
    ・テンキーの5で、投影方法を平行投影に
    f:id:programmer-jun:20190426192626p:plain

  19. ループカットで6本の辺を追加します。
    Ctrlキー + Rキーでループカット起動
    ・マウス中ボタンスクロールで、分割数を6に
    ・マウス左クリックで、分割数を確定
    ・マウス右クリックで、等間隔に分割
    f:id:programmer-jun:20190426192640p:plain

  20. ループカットで追加した辺の位置を調整します。
    Altキーを押しながら右クリックで、辺をループ選択
    Gキーを2回押し、辺を取っ手付近に移動
    f:id:programmer-jun:20190426192655p:plain

  21. 取っ手のメッシュを編集するために、カップの部分を非表示にします。
    ・面選択に切り替え
    ・マウスカーソルをカップの上にもっていき、Lキーでメッシュを選択
    f:id:programmer-jun:20190426192712p:plain

  22. カップを隠します。
    ・[メッシュ]-[表示/隠す]-[選択しているものを隠す]
    f:id:programmer-jun:20190426192725p:plain

  23. 図のように面を選択します。
    ・陰面処理を無効に
    Cキーで「円で塗りつぶし選択」に切り替え
    ・マウス左ボタンを押しながら、塗りつぶすように選択
    ・選択完了後、陰面処理を有効に戻す
    f:id:programmer-jun:20190426192743p:plain

  24. 選択した面を削除します。
    Xキーを押して削除メニューを表示し、[面]を選択
    f:id:programmer-jun:20190426192757p:plain

  25. 隠しているカップの部分を表示します。
    ・[メッシュ]-[表示/隠す]-[隠したものを表示]
    f:id:programmer-jun:20190426192814p:plain

  26. 取っ手の付け根を選択します。
    Shiftキーを押しながら右クリック
    f:id:programmer-jun:20190426192829p:plain

  27. 選択している面を削除します。
    Xキーで削除メニューを表示し、[面]を選択
    f:id:programmer-jun:20190426192840p:plain

  28. 面が消え、カップに穴が空きました。
    f:id:programmer-jun:20190426192852p:plain

  29. 穴の形を整えます。
    ・頂点選択に切り替え
    ・右クリックで頂点を選択
    Gキーで頂点を移動
    f:id:programmer-jun:20190426192905p:plain

  30. 取っ手と、取っ手の付け根の辺をループ選択します。
    Altキー + 右クリックで、取っ手の辺を選択
    Shiltキー + Altキー+右クリックで、対応する穴の辺も選択
    f:id:programmer-jun:20190426192918p:plain

  31. 取っ手とカップを結合します。
    ・[メッシュ]-[辺]-[辺ループのブリッジ]を選択し、結合
    f:id:programmer-jun:20190426192931p:plain

  32. 繋がりました。
    f:id:programmer-jun:20190426192943p:plain

  33. 上側も同様に繋げます。
    f:id:programmer-jun:20190426192957p:plain

  34. マグカップの完成です。
    f:id:programmer-jun:20190426193011p:plain

感想

難易度が上がりました。
2つのメッシュを繋ぎ合わせるのは難しいですね。
手順を見ながらだとついていけますが、 自分でモデリングするのは、まだまだ難しそうです。

学んだこと

・Cでの選択
・陰面処理
・辺ループのブリッジ

疑問

・モディファイアーとは何?