ゲーム制作初心者 | 「Free! Illustlation &くりえいてぃぶ」 https://illust55.com 絵と動画とゲームの作り方をもっと簡単にする方法を紹介します Sun, 12 Apr 2026 10:27:31 +0000 ja hourly 1 https://illust55.com/storage/2021/09/cropped-ファビコン2-32x32.png ゲーム制作初心者 | 「Free! Illustlation &くりえいてぃぶ」 https://illust55.com 32 32 AIでアクションゲーム神速作成！プログラミング未経験者でも簡単制作方法【バイブコーディング入門】 https://illust55.com/2871/ https://illust55.com/2871/#respond Thu, 14 Aug 2025 13:50:25 +0000 https://illust55.com/?p=2871 【AIゲーム制作】AIでアクションゲーム神速作成！プログラミング未経験者でも簡単作成【バイブコーディング入門】

ゲームをつくりたいけどムズかしそう

ゲームつくるのは時間がかかる

AIでゲーム制作をスピードアップさせたい

・・・と悩んでいませんか？

この記事ではAIをつかってアクションゲーム を一瞬でつくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIゲーム生成でつかうサイトの紹介

AIでプログラムなど、生成することに特化したサイトです

今回はこのサイトでAIプログラム生成をしたいとおもいます

>> 「Google AI Studio」のサイト

Piskel：ピクセル画像のスプライトシートを分割 ＆ アニメーション

ピクセル画像のアニメーションに特化したサイトです

こまかくピクセルアニメーションのコントロールができます

>> 「Piskel」のサイト

AIで制作したゲームの紹介と流れ

今回つくるゲームがじっさいに動いてる動画です

ゲームのイメージがわかるので、ぜひ記事と一緒にごらんください

AIをつかってアクションゲームのプログラムをつくる

Google AI Studioでアクションゲームのうごきをつくる

はじめはAIコーディングがやりやすいGoogleAIStudioのサイトに移動します

次のことをAIに伝えます

・「スマホ画面の比率」「バンパイアサバイバーのようなゲーム」

・「武器は銃になる」「プログラムをHTMLにする」

「RUN」をクリックするとさっそくAIがゲームのプログラミングをつくりはじめます

・プログラムの生成が終わったらダウンロードボタンをクリックしてください

・即実行できるHTMLファイルがダウンロードできます

AIが生成したゲームをプレイしてみよう

・ゲームとして基本的な動きはできるプロトタイプをつくることができました

生成したプログラムの「敵を多くする＆敵の種類をふやす」ように変える

つぎは敵の数が少なすぎるので、増やしてゲーム画面を確認したいと思います

次のことをAIに伝えます

「スクロールバーが表示されないように」、「敵の量を10倍おおくすること」
「２発でやられる敵をつくること」

生成が終わったゲームをプレイすると、しっかり敵が増えたゲームになります

・生成が終わったファイルをダウンロードしてプレイします

ボスキャラを登場させるようにAIに伝えます

次のことをAIに伝えます

「マップを広げて画面外でも動きまわれること」、「開始から10秒でボスが登場すること」
「ボスは大型にすること」

生成が終わったゲームをプレイしました

・ボスが登場して、画面外に動けるようになりました

AIでゲームキャラクターのアニメーションをつくる

ChatGPTのサイトにうつり、ピクセル画像のスプライトシートをつくります

AIにつぎのことをつたえます

「pixel,blue magician cat with magic stick,walk,左上は右足を後ろに、右上は両足をそろえて立ち止まっている、右下は左足を前に、64×64,5frame,sprite sheet,」

ポイントです：
「Pixel」、「青の魔法使い猫で杖をもっている」、「歩く」
「左上の絵は右足を後ろ」、「右上は両足をそろえて立ち止まっている」
「右下は左足を前に」、「64×64のピクセル数」、「スプライトシート」
「５フレームのアニメーションであること」

スプライトシートが完成しました

つぎはこのスプライトシートの背景を透明にします

・歩きのスプライトシートが完成しました

背景を透明にするために、画像の編集サイトに移動します

１．「背景」タブをクリックします

２．「背景削除」ボタンをクリックします

３．背景を透明にするファイルを読みこみます

読み込んだと同時に背景を透明にできました

・背景がチェックマークになり、透明にすることができました

おおきさも調整します

１．編集ツールから切り抜きをおこなえます

２．切り抜きがおわったらダウンロードボタンをクリックします

次は透明になったスプライトシートを分割します

１．ファイルタブをクリックします

２．「Browse image」ボタンから画像ファイルを読み込みます

読み込んだスプライトシートを４つに分けます

１．「Import as spritesheet」をえらびます

２．もとの画像の半分の数値を入れると4分割できます

３．「Import」ボタンをクリックします

ツールをつかってアニメーションがしっかり動くように調整します

１．分割された画像が左に並びます

２．右上のスライダーからアニメーションの速さを確認できます

３．左メニューのツールを使うと、画像の位置などのおかしい部分を直すことができます

しっかり動くようになったらダウンローダーします

１．「Zip」タブをクリックします

２．Download ZIPをクリックします

画像ができたのでさっそくゲームに登場させたいと思います

Google AI Studioでプログラムをつくります

つくった画像ファイルをアップロード、プログラムもアップロードします

AIにつぎの通り伝えます

・「アップロードしたpng画像を連続で読み込ませてアニメーションにすること」

・「アニメーションさせるのは主役であること」

プログラム生成が終わったゲームをプレイすると、キャラクターが動くようになりました

・主役プレイヤーがしっかり動くようになりました

ゲームの背景画像をつくる

つぎはゲームの背景画像をつくります

AIにつぎのことを伝えます

・「視点は俯瞰視点になること」、「ピクセル画像」

・「世界観はメルヘン、魔法の世界であること」

一枚の絵をさらに細かく遠くから見た感じでつくることをAIに伝えました

・背景にあう画像ができあがりました

・２枚目の同じく背景にあう画像ができあがりました

生成した画像をゲーム背景にすることをAIに伝えます

１．生成した画像2枚をアップロードします

２．AIにつぎのことを伝えます

・「画像2枚を背景としてつかう」、「画像を4方向に配置する」
・「背景がくり返すこと」

・背景がしっかり表示されて、ゲームっぽくなりました

・キャラクターの大きさとマッチする背景があらわれました

つぎは敵キャラの画像をつくります

AIにつぎのことを伝えます

・「同じ感じでかわいいコウモリ敵キャラを生成すること」
・「右上は羽を少し閉じている」「右下は羽を開いている」「飛んでいるスプライトシート」

できあがりましたが、さらに自然な正面からの画像に変えたいと思います

・AIに「正面からの絵にすること」を伝えます

・敵キャラの画像ができあがりました

先ほどと同じように背景を消します

・「Import as sprite sheet」から画像を分割します

・アニメーションを調整してダウンロードします

つくった敵キャラをゲームに登場させるプログラムをつくります

１．分割した画像をアップデートします

２．「敵キャラのファイル名（bad01から04）がアニメーションになっていること」をAIに伝えます

・敵キャラもアニメーションするゲームができあがりました

・つづいてボスキャラも生成します、つくったボスキャラをさらにアレンジします

一度つくった画像をアップロードして、アニメーションがおかしい部分をなおします

次をAIに伝えます

・「walk」「右足を後ろに」「右上は両足をそろえて立ち止まっている」

・「右下は左足を前に」「64×64」「5frame」「sprte sheet」

・「キャラは右斜め前を向いている」

・つづいて同じつくり方で、もう一つ敵キャラをつくりました

プログラムにつくった画像を追加します

・ボスキャラやプログラムなど、つくったファイルをアップロードします

・敵キャラのアニメーションの方法を伝えます

完成したプログラムをプレイします

・ボスキャラ、敵キャラがアニメーションするゲームが完成しました

まとめ

AIのプログラミングは他のページでも紹介しています、あわせてごらんください

]]> https://illust55.com/2871/feed/ 0 AIで超簡単ゲーム作成！バイブコーディングでプロ級＆バイブコーディング入門編 https://illust55.com/6153/ https://illust55.com/6153/#respond Sat, 26 Jul 2025 14:32:49 +0000 https://illust55.com/?p=6153 AIで超簡単ゲーム作成！バイブコーディングでプロ級＆バイブコーディング入門編
AIで超簡単ゲーム作成！バイブコーディングでプロ級＆バイブコーディング入門編

ゲームをつくりたいけど難しそう

AIでゲームをつくれるらしいが、どうやればいいのかわからない

AI生成をはじめたいけど、どうすればいいのかわからない

と悩んでいませんか？

この記事ではGoogle AI Studioを使って無料でゲームをつくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIゲーム生成でつかうサイトの紹介

Google AI Studio：無料でつかえるGoogleが運営する開発用のAI生成サイト

今回ゲーム生成でつかうサイトです

>> 「Google AI Studio」のサイト

このサイトは開発者向けのAIサイトです

GoogleのGeminiをベースにさらに細かくプログラムや画像、動画をつくることができます

メニューは英語ですが、命令は日本語OKなので、ブラウザの翻訳をつかえば問題なく使うことができます

Google Gemini：無料でつかえる万能AIツール

無料でつかえるGoogle公式のAIツールです

「Gemini」のサイト

Googleトップページからもつかえるので、多くの方がつかっているAIツールです

とても使い方がわかりやすく中央のボックスに命令を入れるだけで、AIが命令を理解して動いてくれます

Google AI Studioの爆速ゲーム制作の方法

Google AI Studioでつくったゲームの紹介

今回つくるシューティングゲームです

プログラムをAIにつくってもらうバイブコーディングという方法でつくります

今回つくるシューティングゲームです

プログラム、イラスト、ゲームにつかう物をすべてAIでつくることができます

もちろんプログラムが未経験の方でもつくることができます

AIでゲームのイメージイラストをつくる

Geminiに生成するイメージを命令する

はじめに、Geminiでゲームのイメージ画像を生成します

次の点を伝えて画像を生成します

・「横スクロールシューティングゲームの画面」、「魔法使いでほうきにのった魔法使い猫が主役」

・「ファンタジーの世界」、「ピクセル画像」

Geminiが生成したイラストをダウンロードする

Geminiがつくったゲームイメージの例です

このイラストをもとにゲームのプログラムを生成します

画像の生成は1～2分でおわります

生成がおわったら、バイブコーディングでつかうためにダウンロードします

AIで横スクロールシューティングのプロトタイプをつくる

「Google AI Studio」のサイトでプログラムをつくります

「Google AI Studio」は本格的にAIのプログラムの生成をおこなうことができます

１．Geminiがつくったイメージから１枚を選び、アップロードします

２．「HTML５でつくること」、「横スクロールシューティング」であることをAIに伝えます

生成したプログラムをダウンロードする

プログラムの生成は１～3分でおわります

・プログラムの生成がおわったら「HTML」ファイルをダウンロードできます

生成したゲームをためしてみよう

キーボードで動く横スクロールシューティングをつくれました

しかし、ゲーム画像がブロックなので次は画像をつくります

まだブロックの絵が動くだけですが、しっかりシューティングゲームとして動くプログラムができました

・「HTML」はダブルクリックで実行できます

・しっかりシューティングゲームが動きます

主役キャラクターの画像をつくる

ゲーム画像がブロックなので、ゲーム画像をつくります

Geminiでキャラクター用の画像を生成します

・もとの画像を「Gemini」にアップロードして、キャラクターを生成します

キャラクター画像を生成できました

しかし、背景が白色で透明ではないようです

・もとの画像から背景が白色になったキャラクターが生成されました

背景切り抜きができる「My Edit」のサイトに移動します

>> 「My Edit」のサイト

１．背景を切り抜きできるサイトに移動します

２．「背景」ボタンをクリックします

３．キャラクターの白背景がなくなり、透明になります

つづいて、画像の大きさを小さくします

１．「編集」ボタンをクリックします

２．キャラクターの周りをドラッグして画像を小さくできます

３．画像の大きさを決めたら、「ダウンロード」ボタンをクリックします

Geminiで敵キャラクターを生成する

主役キャラにつづいて敵キャラの画像もつくります

・つづいて、「Gemini」で敵キャラを生成します

・「メルヘン」、「ピクセル」、という２つのキーワードを伝えます

少しかわいい敵キャラをつくることができました

つづけて何体か敵キャラをつくります

ちょっとかわいいキャラがあらわれました

つくったキャラの背景を透明にして、画像のムダな部分をカットします

１．「背景」ボタンから背景を透明した後、「編集」ボタンから画像の大きさを調整します

２．「ダウンロード」ボタンをクリックして、画像をダウンロードします

ChatGPTで背景の画像をつくる

背景はくり返しのループ画像がとくいなChatGPTでつくります

>> 「ChatGPT」のサイト

１．「ChatGPT」のサイトに移動します

２．「メルヘン」、「魔法」「ピクセル画像」、「風景」、「ループ画像」を伝えて生成します

３．ループ背景が生成できました

つくった全ての画像をゲームに登場させる

はじめに、主役キャラをゲームに登場させます

１．「＋」ボタンをクリック

２．「Upload File」ボタンをクリック、主役の画像ファイルをアップロードします

主役キャラの画像をアップロードできました

この画像をゲームに登場させるようにAIに伝えてプログラム生成します

１．アップロードした画像とプログラムの画像を変えるように伝えます

２．「Run」ボタンをクリックして、プログラムを生成します

主役のキャラ画像が登場しました

次は敵キャラをゲームに登場させます

登場させる敵キャラの画像をアップロードします

命令も組み合わせて、AIでプログラムを生成します

１．敵キャラの画像をアップロードします

２．「敵キャラ」、「編隊を組んで動く」、「やられた時のエフェクトを花火のように」、
「弾をうつこと」をAIに伝えます

３．「Run」をクリックして、プログラムを生成します

生成したプログラムを実行すると敵キャラがあらわれました

次は背景を登場させます

作成した背景をアップロードします

画像、命令と組み合わせてプログラムを生成します

１．「敵キャラを小さくする」ことを伝えます

２．背景画像をアップロードして、「横にくりかえす」ことを伝えます

敵キャラが小さくなり、背景画像がゲームに登場しました

しかし、まだプレイヤーの玉がゲームっぽくありません

プレイヤーの玉、敵キャラの大きさをもっとゲームに合うように変えます

・「敵キャラを小さくすること」、「主役の弾を炎のように」することを伝えます

全体的にメルヘンな感じで、ゲームが完成しました

まとめ & ブログで紹介したゲームの動画

ゲームがうごいている雰囲気、くわしいつくり方は下の動画から確認できます

AIのプログラミング（バイブコーディング）は他のページでも紹介しています

合わせてごらんいただくと、さらに多くのゲーム作成にいかせます

]]> https://illust55.com/6153/feed/ 0 初心者向け！無料のゲーム作成ソフト＆ゲームエンジンの一覧とまとめ【個人ゲーム制作ツールのおすすめ】 https://illust55.com/8180/ https://illust55.com/8180/#respond Wed, 01 May 2024 10:43:00 +0000 https://illust55.com/?p=8180

「ゲームをつくってみたい」
「無料でゲームが作れるソフトを知りたい」
「3DRPGを無料でかっこよく、つくってみたい」

けど
「何がいいかわからない」
「どうすればいいかわからない」

・・・と悩んでいませんか？

このページでは、だれでも、カンタンに始められる方法でゲームつくりのソフトを紹介しています

ぜひ、このページでゲームつくりを始めてください

目次の流れにそって紹介します


Youtubeでさらにおもしろく、ゲームのつくり方を紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

初級～中級：カンタン＆スグに始められる・けど！スゴいゲームもできる

Gamefoot：カラフルブロックを組み合わせてゲームをつくる

カラフルのブロックを組み合わせてゲームをつくります

アイディアしだいで多くのゲームをつくることができます

>>「Gamefoot」公式サイト

教育向けプログラミング「Scrach」のようにカラフルなブロックを組み合わせてゲームをつくります

サイトにはたくさんのゲームを試すことができるため、どんなゲームができるかイメージできます

また、オンラインでつくるため、インストールせずに、スグにはじめることができます

ROBLOX：3Dゲームを簡単につくれる巨大プラットフォーム

「ROBLOX」はボクセル3Dゲームをカンタンにつくれるソフトです

世界中で多くのユーザーがROBLOXをプレイしています

>> 「ROBLOX」公式ページ

「ROBLOX」は世界中で多くのユーザーがプレイしているゲームサービスです

「ROBLOX」のゲームをつくることや、つくったゲームを他のユーザーとプレイすることができます

また、ゲームをつくって、お金を稼ぐことができるシステムもあります

Fancade：ボクセルゲームをカンタン作成＆プレイ

Fancadeはボクセルゲームをつくれるプラットフォームです

>> Fancadeのサイト

Fancadeはボクセルゲームをカンタンにつくれるサイトです

スマートフォンからも使うことができ、見下ろし画面からの3Dゲームをつくることができます

プログラミングを考える必要がないので、子どもから大人まで楽しめるサイトです

また、クリエイターの交流もDiscordでさかんにおこなわれています

始め方＆つくり方

サイトにアクセスするとメニュー画面があらわれます

・「Build」をクリックします

ゲームのテンプレートをえらぶ画面があらわれます

・元になるゲームをクリックします

※ テンプレートを使わずにゲームをつくることもできます

「EDIT」ボタンがあらわれます

・「EDIT」をクリックします

プロジェクトにゲームが追加されます

・プロジェクトにあらわれたゲームをクリックします

もう一度「EDIT」ボタンがあらわれます

・「EDIT」をクリックします

プレイ、エディットをえらぶ画面があらわれます

・「EDIT」をクリックします

ゲームをつくる画面があらわれます

１．パーツをドラッグ＆ドロップで、マップにくわえることができます

２．マウスのセンターホイールで拡大縮小と3D回転、右ボタンで上下左右に画面を動かせます

パーツをドラッグ＆ドロップでくわえます

１．パーツをくわえてみました

２．「▶」ボタンでゲームをはじめられます

ゲームをプレイすることができます

・編集がおわったゲームをプレイすることができます

Rosebud.ai：AIをつかって一瞬でゲーム制作ができるサイト

テキストを入れると自動でゲームを作成してくれます

>> Rosebud.aiのサイト

テキストから絵をつくるAIと同じように、テキストからゲームを生成することができます

サイトでは制作した多くのゲームが投稿されています

投稿されたゲームから自分のゲームをつくることもでき、初めての方でも気軽に始めることができます

生成はスグに終わりますが、右の写真のような本格的なゲームをつくることができます

ゲーム制作の効率を上げたい方にとてもオススメのサイトです

Springin（スプリンギン）：iPhoneでゲームがつくれる

モバイルでプログラミングをせずに、ゲームをつくることができます

>> Springinのサイト

iPhoneでゲームをつくれるアプリです

Androidが無いのが残念ですが、イロイロなゲームをつくることができます

ゲームを投稿することができ、他のユーザのゲームをプレイすることもできます

インターフェースがわかりやすく初心者でも始めやすいアプリです

RPG PlayGround:2DのきれいなRPGゲームを簡単につくれる

RPGツクールのように、2DのRPGをカンタンにつくることができるソフトです

>>「RPG PlayGround」公式サイト

「RPG PlayGround」は無料でカンタンにアクションRPGをつくることができます

メニューは英語ですが、Youtubeなどで作り方がたくさんアップロードされています

このため、学習をカンタンに進めることができます

メニューや操作方法がわかりやすいので、とてもオススメのソフトです

RPG Paper Maker：無料で3DのRPGをカンタンにつくれる

2DのRPGをつくるように、カンタンに3DRPGをつくることができます

>> 「RPG Paper Maker」公式ページ

「RPG Paper Maker」は2DのRPGのようにカンタンに3DのRPGをつくることができます

2Dのペーパーモデルを3Dにしているため、完全な3Dモデルではありません

しかし、3Dの迫力や、かっこよさがあり、つくるのが楽しめるソフトです

全部英語ですが、カンタンな英語のみです

Youtubeにも作り方の動画があるので、スムーズに作ることができます

WOLF RPGエディター（ウディタ）：2DのRPGをカンタンにつくることができる

RPGをつくることに特化したソフトです

>>「WOLF RPG」のサイト

カンタンに無料でRPGをつくることができるソフトです

このソフトから市販化されたゲームもあり、自由に作りこむことができます

歴史が長く、インターネット上には多くの人がゲームとやり方をアップしています

WOLF RPGのゲームをブラウザでプレイできるサイトが開発中です

https://ci-en.net/creator/12702/article/608962

PLiCy：ブラウザでゲームをつくる＆投稿できるサイト

すぐにゲームがつくれて、つくったゲームを公開できるサイトです

「PLiCy」のサイト
カンタン、スグにゲームをつくって公開できるサイトです

複雑なゲームや3Dはムズかしいですが、2DのアクションやRPGなどを作ることができます

また、多くのユーザーがいろいろな種類のゲームが公開しています

このため、つくる前にどんなゲームがつくれるのか、確認してから始めることができます

Scrach：世界中で使われているビジュアルプログラミング

Scrachは世界中の人が使う、ビジュアルプログラミングのサイトです

>> 「Scrach」のサイト

Scrachは子ども向けのビジュアルプログラミングのサイトです

教育用として、世界でもっとも使われていおり、ゲームを作ることもできます

他のユーザーが作ったゲームをプレイするページもあり、多くのゲームが公開されています

工夫しだいでは、とてもカッコイイゲームを作ることができます

中級～上級：じっくり大作を作りたい人向け

Unity：世界中で個人のゲームクリエイターが使う万能ソフト

Unityはモバイルゲームから商用のゲームまで幅広く使われています

https://unity.com/ja

世界中で個人のゲームクリエイターが使っており、とても有名なソフトです

このため、インターネットでスグに使い方を調べることができ、カンタンに始めることができます

また、モバイルゲームから商用ゲームまで幅広く作ることができる万能ソフトです

とくに2Dアクションゲーム開発では多くのゲームにつかわれているおり、オススメです

次のページで使い方を書いています

>> Unityのページ

UnrealEngine：3Dアクションからアニメまで幅広く使うことができる

ファイナルファンタジーなど、ビッグタイトルでも使われているゲームエンジンです

https://www.unrealengine.com/

UnrealEngineは超キレイなグラフィックをつくるのが得意なゲーム制作ソフトです

3Dアクション、漫画の背景、建築など幅広く世界中で使われています

使いこなすのは、とてもムズかしいですがフリーソフトとは思えない作品を作ることができます

次のページで使い方を書いています

>> Unreal Engineのページ

Flowlab：ブラウザで本格ゲームがつくれるチュートリアル充実のゲームエンジン

操作画面が英語ですがチュートリアルが充実しているのでカンタンに始められます

>> Flowlabのサイト

ブラウザでつくる2Dアクションのゲームエンジンです

チュートリアルが充実しており、操作画面は英語ですがカンタンに始めることができます

ゲームストアのSteamに出品されているタイトルもあり、本格的なゲームをつくることができます

フリーの2Dゲームエンジンを探している方にオススメです

Ren’Py：世界中で使われている海外製ノベルゲーム

プログラムを使う必要がありますが、多くのことができます

Ren’Pyのサイト

プログラム言語のPythonを使いゲームをつくることができます

海外製なので多くの情報が英語ですが、日本ユーザの方も情報を公開しています

有料のゲームにも使われており、本格的なノベルゲームを作りたい方にオススメです

上級：こだわりのゲームをつくりたい人向け

GB Studio：ゲームボーイのゲームをつくれる＆ウェブサイトでプレイできる

ゲームボーイのゲームをつくれて、ウェブにも公開できます

>> GB Studioのサイト
ゲームボーイのゲームをつくれるソフトです

つくったゲームボーイのゲームはエミュレータでプレイできるだけではありません

HTML５のゲームとしてウェブサイトに埋め込むこともできます

アクションゲームからRPGまで幅広いゲームをつくることができるソフトです

Game Maker：2Dのビッグタイトルでも使われている万能ゲームエンジン

Game MakerはUndertaleなどのビッグタイトルでも使われています

https://gamemaker.io/ja-JP

Game Makerは世界中のゲームクリエイターで使われているゲーム制作ソフトです

Undertale、Downwellなどのビッグタイトルで使われており、いろいろなタイプのゲームが作れます

作れるゲームは主に2Dですが、画面がわかりやすくドラッグ＆ドロップでもゲームがつくれます

キッズ＆子ども向け

Tynker：サンプルがたくさん用意されている＆チュートリアルがていねい（英語）

チュートリアルがわかりやすく＆ゲームが最初から用意されています

英語がわかる方にオススメです

Tynkerのサイト

ブロックでプログラムをつくるタイプのゲームメーカーです

かわいいサンプルゲームが用意されており、子どもが楽しみながらつくれるサイトです

カンタンな英語のみなので、英語が少しでもわかる方にはオススメのサイトです

有料ソフトでカンタン＆スグにつくりたい！

Shump Creator：タテ＆ヨコの本格シューティングゲームがつくれる

タテ・ヨコのシューティングゲームをつくることができます

英語もカンタンな言葉のみです

Shump Creatorのサイト

カンタンにタテ・ヨコのシューティングゲームをつくれるソフトです

シューティングゲームをプログラミングなしでつくれるので、Unityが苦手な方にもオススメです

公式サイトにはレベルの高いユーザーが作ったゲームが公開されています

すぐにゲームをつくりたい方にオススメのソフトです

RPG Developer Bakin：3DRPGをカンタンにつくれるソフト

3DRPGをつくる専用のソフトです

>> RPG Developer Bakin

3DRPGをつくるにはコマンドやフィールド、ダンジョン等おおくの画面移動とプログラムが必要です

しかし、このソフトを使えばプログラミングなしにRPGをつくることができます

3Dモデル（FBXフォーマット）や音楽を用意する必要はあります

しかし、フリー3DソフトのBlenderやAI、フリー素材を使えばカンタンに制作することもできます

ティラノビルダー（TyranoBuilder Visual Novel Studio）

プログラムの知識なしでノベルゲームをつくることができます

>> ティラノビルダー公式サイト

とても多くのノベルゲームで使われているソフトです

主に国内ユーザーですが、商用のゲームからフリーウェアのゲームまで幅広く使われています

プログラムの知識が必要なく、困った時もネットで多くの情報を探すことができます

ノベルゲーム作りに専念したい方にオススメのソフトです

RPGツクール：30年続く歴史ながいRPG専用のソフト

パソコン、プレステーションなど多くのハードで発売されいます

>> RPGツクール公式サイト

1990年から作られている歴史あるゲームエンジンです

ドラクエや昔のファイナルファンタジーのようなコマンド形式のRPGをつくることができます

2Dのゲームが得意で3Dをあつかうことができません

3DのRPGをつくる有料のソフトを探している場合は「RPG Developer Bakin」をオススメします

2DのRPGつくりに特化しているので、とても使いやすくプログラムの知識はまったく必要ありません

青鬼など多くのゲームが発売され、成功しているので上級者から初心者までオススメのソフトです

・RPG MAKER WITH：Nintendo Switch用のRPGツクール

Nintendo Switch用のRPGツクールです

Nintendo SwitchでもRPGツクールが発売されました

自作のイラストやフリー素材をつかうのはできないようです

わかりやすい画面のつくりなのでゲーム制作をこれから始める方にとてもオススメのソフトです

・RPG MAKER UNITE：ゲームエンジンUnityでつかえる新しいRPGツクール

Unityでつかえる新しい形のRPGツクールです

>> RPG MAKER UNITEのUnityアセットストア

Unityでつかえる新しいタイプのRPGツクールです

まだ未完成の部分が多く、拡張機能は今までのRPGツクールと互換性がありません

このため、現在は他のRPGツクールの方が作りやすいです

しかし、ソフトの完成度が上がればUnityの機能と加わり、とても便利なソフトになります

まとめ

今回は「無料のゲーム制作ソフトと個人ゲーム開発について紹介しました

Youtubeでは、さらにおもしろく絵のつくり方を紹介しています

また、他のページでもCG・映像のつくり方について紹介しています

>> 動画で紹介！絵と映像のつくり方

>> 絵と映像のつくり方のカテゴリーページ

]]> https://illust55.com/8180/feed/ 0 Unity超入門講座！かっこいいエフェクトのアセットの使い方＆ボタンクリックで爆発する３Dオブジェクトの作り方【初心者向け】 https://illust55.com/7623/ https://illust55.com/7623/#respond Sat, 16 Apr 2022 01:58:31 +0000 https://illust55.com/?p=7623

「3Dのムービーについて興味がある」
「3Dをつくってみたい」
「かっこいい3Dのエフェクトをつくってみたい」

・・・でも
「どうやって始めればいいか、わからない」

と悩んでいませんか？

このページでは、だれでも、できる方法で、3Dエフェクトのつくり方を紹介しています

今回は無料ソフト「Unity」と「MagicaVoxel」をつかって、3Dエフェクトをつくる方法を紹介します

ぜひ、チャレンジしてください

つぎの目次の流れにそって進めます

Youtubeでさらにくわしく、絵と映像のつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・Unityをはじめて聞いた方

Unityとはゲームをつくためのソフトです

Unityは世界でもっとも使われているゲームをつくるためのソフトです

公式サイトからインストールプログラムをダウンロードすることができます

＜Unity公式サイト＞
https://unity.com/ja

Unityのインストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

・かっこいいエフェクトアセットを使って爆発する３Dオブジェクトをつくろう

・このページで紹介すること

このページで紹介することです

3Dをつくり、マウスクリックで爆発するアニメーションをつくります

・3Dソフト「MagicaVoxel」をはじめよう

3Dソフトの「MagicaVoxel」をダウンロードします

１．「MagicaVoxel」の公式サイトにアクセスしてください
＜MagicaVoxel公式サイト＞
https://ephtracy.github.io/

２．「Download」をクリックしてください

ダウンロードできるファイルが見つかります

・使うPCに合わせてファイルをクリックしてください

ダウンロードしたファイルを解凍するとアイコンがあらわれます

・アイコンをクリックすると起動します

・「MagicaVoxel」で3Dキャラクターをつくろう

3Dキャラクターをつくる用意をします

１．「Clear」をクリックしてください

２．「グリッド」のアイコンをクリックしてください

キャラクターの中心をはじめにつくります

１．ボックスのアイコンをクリックしてください

２．「アタッチ」をクリックしてください

３．画面の真ん中でクリックしてください

４．作られたボックスの上にカーソルを合わせて、さらにクリックしてタテにボックスをつなげます

高さが「23」になるようにつくります

１．23回クリックしてタテに23段になるようにつくります

２．下の「Z」が「２３」になるようにつくります

キャラクターの足をつくります

１．カラーパレットからイエローをクリックしてください

２．タテのブロックのまわりをクリックしてください

３．「高さ２」「ヨコ２」「長さ６」のイエローのブロックをつくります

大きさが「20」の球をつくります

１．小さいボックスのアイコンをクリックしてください

２．「アタッチ」をクリックしてください

３．「VOXEL 20」にして、「3D」をクリックしてください

４．カラーパレットのブルーをクリックしてください

５．タテに長い薄青ブロックにマウスを合わせてください

６．下の「Z」が「11」になるようにしてください

球の回りをけずります

１．上矢印のアイコンをクリックしてください

２．「Erase」のボタンをクリックしてください

３．飛び出ている面に合わせてクリックしてください

１つけずりました

・一段無くなりました

目の色をぬります

１．ボックスのアイコンをクリックしてください

２．「Paint」をクリックしてください

３．平らな面でクリックして目をつくります

・完成した3Dオブジェクトを保存しよう

他のソフトにはこぶ用意をします

・右下の「obj」をクリックして3Dを保存します

保存すると3つのファイルができあがります

・保存すると３つのファイルがあらわれます

・3Dオブジェクトにエフェクトをくわえるためのパーツをダウンロードしよう

Unityをインストールしていない方は、

公式サイトからダウンロードしてください

＜Unity公式サイト＞
https://unity.com/ja

Unityで使う、エフェクトのパーツをダウンロードする用意をします

公式サイトにアクセスしてください

１．公式のゲームの部品のサイトにアクセスしてください
https://assetstore.unity.com/packages/essentials/tutorial-projects/unity-particle-pack-127325

２．画面の上の「ID」アイコンをクリックしてください

３．画面の上の「ログイン」ボタンをクリックしてください

アカウントにゲーム部品を追加します

・「マイアセットに追加する」をクリックしてください

・Unityでつくった3Dに爆発するアニメーションをつくろう

Unityを起動してください

１．「プロジェクト」のボタンをクリックしてください

２．「新しいプロジェクト」ボタンをクリックしてください

今回は、3Dのプロジェクトをつくります

１．「すべてのテンプレート」ボタンをクリックしてください

２．「3D」ボタンをクリックしてください

３．「プロジェクトを作成」をクリックします

Unityの操作ができる画面があらわれました

・「Window」 → 「Package Manager」をクリックしてください

自分のアセットパーツにアクセスします

１．「Packages」をクリックします

２．「My Assets」をクリックしてください

公式サイトで追加したパーツをクリックしてください

１．あらわれたボタンから「Unity Particle Pack」をクリックしてください

２．「Download」ボタンをクリックしてください

３．あらわれた「Import」ボタンをクリックしてください

ダウンロードしたパーツをとりこみます

・「Import」をクリックしてください

つくった3DをUnityにとりこみます

１．「obj」、「png」ファイルをドラッグ＆ドロップしてください

２．3Dオブジェクトがあらわれます

3DをUnityでコントロールする用意をします

１．3Dの「▶」をクリックしてください

２．あらわれた3Dを画面にドラッグ＆ドロップしてください

画像ファイルを3Dキャラクターにドラッグ＆ドロップしてください

3Dキャラクターの色があらわれます

１．取り込んだ画像ファイルをドラッグ＆ドロップします

２．3Dキャラクターの色があらわれました

マウスのクリックで動くためのプログラムをつくります

１．空いている部分で右クリックをしてください

２．「Create」 → 「C# Script」をクリックしてください

メモ帳でプログラムを書きくわえます

・あらわれた「C#ファイル」をメモ帳にドラッグ＆ドロップしてください

次のプログラムをコピー＆ペーストしてください

・次のプログラムをコピー＆ペーストしてください

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class NewBehaviourScript : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    [SerializeField] GameObject explosionPrefab;
 
    void OnMouseDown()
    {
        Instantiate (explosionPrefab, transform.position, Quaternion.identity);
        Destroy(this.gameObject);
    }
}

クリックに反応する部分をつくります

１．3Dをクリックしてください

２．「Add Component」をクリックしてください

３．検索ボックスに「col」といれてください

４．「Box Cllider」をクリックしてください

クリックで動くためのプログラムを3Dオブジェクトにくわえます

・C#ファイルを「Add Componet」にドラッグ＆ドロップしてください

爆発するエフェクトをえらびます

１．「EffectsExamples」 → 「FireExplosion」 → 「Prefabs」をクリックしてください

２．「Big Explosion」を「Explosion Prefab」にドラッグ＆ドロップしてください

カメラの位置を画面で見えている位置にします

・「Main Camera」をクリックしてください

カメラの位置がうごきます

・「GameObject」 → 「Align With View」をクリックしてください

・つくった動きをテストプレイしよう

プレイで動きを確認してください

１．「Game」タブをクリックしてください

２．「▶」ボタンをクリックしてください

3Dが爆発するアニメーションになりました

・「3D」をクリックすると爆発するエフェクトをつくることができました

・まとめ

今回は無料ソフト「Unity」と「MagicaVoxel」をつかって、3Dエフェクトをつくる方法を紹介しました

Youtubeでは、さらにおもしろく絵のつくり方を紹介しています

また、他のページでもゲーム・CG・映像のつくり方について紹介しています

>> Youtubeチャンネル イラスト55 @ クリエイティブ情報を紹介

>> Unityのカテゴリーページ

]]> https://illust55.com/7623/feed/ 0 Unity超初心者講座！モバイルタッチ＆ドラッグで画像と3Dモデルをつまむ・動かす・投げよう【Lean Touch】 https://illust55.com/5948/ https://illust55.com/5948/#respond Sat, 11 Dec 2021 09:36:31 +0000 https://illust55.com/?p=5948
Unity超初心者講座！モバイルタッチ＆ドラッグで画像と3Dモデルをつまむ・動かす・投げよう【Lean Touch】
Unity超初心者講座！モバイルタッチ＆ドラッグで画像と3Dモデルをつまむ・動かす・投げよう【Lean Touch】

「スマートフォンのゲームをつくりたい」
「ゲームのつくり方を知りたい」

でも
「どうやればいいか、わからない」

と悩んでいませんか？

このページでは、だれでも、できる方法でゲームのつくり方を紹介しています

今回は、Unityというソフトをつかって、ゲーム中のタップとドラッグの動きをつくる方法を紹介します

ぜひ、チャレンジしてください

つぎの目次の流れにそって進めます

Youtubeでさらにくわしく、ゲームのつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・Unityをはじめて聞いた方

Unityとはゲームをつくためのソフトです

Unityは世界でもっとも使われているゲームをつくるためのソフトです

公式サイトからインストールプログラムをダウンロードすることができます

＜Unity公式サイト＞
https://unity.com/ja

Unityのインストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

・タッチ＆ドラッグで画像と3Dモデルをつまむ・動かす・投げよう

このページで紹介すること

今回、紹介することです

画像をドラッグやタップで動かす方法を紹介します

ゲームのパーツをダウンロードする準備をしよう

はじめに、 ゲーム部品のダウンロードの準備をします

公式のサイトにアクセスしてください

１．公式のゲームの部品のサイトにアクセスしてください
https://assetstore.unity.com/

２．画面の上の「ID」アイコンをクリックしてください

３．画面の上の「ログイン」ボタンをクリックしてください

ドラッグ＆タップで動かすプログラムをダウンロードする準備をします

１．「 lean touch 」で検索してください

２．無料アセットをチェックしてください

３．「Lean Touch」をクリックしてください

アカウントにパーツを加えます

・「マイアセットに追加する」をクリックしてください

Unityを起動してください

１．「プロジェクト」をクリックしてください

２．「新規作成」をクリックしてください

3Dのゲームをえらんでください

１．「3D」をクリックしてください

２．「プロジェクト名」、「保存先」を決めてください

３．「作成」をクリックしてください

ゲームの部品をダウンロードするウィンドウを表示します

１．「Window」メニューをクリックしてください

２．「Package Manager」をクリックしてください

自分のゲーム部品を表示します

１．「Packages」の種類ボタンをクリックしてください

２．「My Assets」をクリックしてください

※ これから探すゲームの部品が見つからない場合は青の数字をクリックしてください

ドラッグ＆タップで動かせるゲームパーツをダウンロードします

１．「Lean Touch」をクリックしてください

２．「DownLoad」をクリックしてください

３．ダウンロード後、「import」に変わります

４．「import」をクリックしてください

ダウンロードしたパーツをゲームに取り込みます

・「import」をクリックしてください

多くのコントロールの種類があります

はじめは、ゲーム部品の大きさを変えるプログラムです

１．「Assets」 → 「Lean」 → 「Touch」 → 「Examples」をクリックしてください

２．「13 Transform」をダブルクリックしてください

３．「テストプレイボタン」をクリックしてください

マウスをドラッグすると、大きさを変えることができます

１．「Ctrl」＋マウスをドラッグすると□の大きさが変わります

２．確認した後、「テストプレイボタン」をクリックしてください

次は、クリックすると火花がでるプログラムです

１．「09 Spawn」をダブルクリックしてください

２．「テストプレイボタン」をクリックしてください

３．クリックすると火花が現れます

次は、クリックすると色が変わるプログラムです

１．「16 Tap To Select」をダブルクリックしてください

２．「テストプレイボタン」をクリックしてください

３．クリックすると□が緑色に変わります

次は、ドラッグした後にラインが現れるプログラムです

１．「Finger Trail」をダブルクリックしてください

２．「テストプレイボタン」をクリックしてください

３．ドラッグするとマウスの後に白いラインが現れます

次は、ゲームパーツを回転することができるプログラムです

１．「TwistRotateCustomAxis」をダブルクリックしてください

２．「テストプレイボタン」をクリックしてください

３．「Ctrl」＋ドラッグで□を回転させることができます

・自分の画像を取りこんでドラッグでうごかそう

LeanTouchは多くのことができます

今回はその中でも、画像を取りこみドラッグで動かす方法を紹介します

・「Transform Relative」をクリックしてください

画像ファイルをドラッグ＆ドロップでゲームの中に取りこみます

１．「Assets」フォルダをクリックしてください

２．画像ファイルをドラッグ＆ドロップしてください

読みこんだ画像ファイルのタイプを変えます

１．読み込んだ画像ファイルをクリックしてください

２．「Texture Type」をクリックしてください

３．「Sprite（2D and UI）」をクリックしてください

何もない場所をクリックするとメッセージが現れます

１．何もない場所で一度クリックしてください

２．「Apply」をクリックしてください

タイプを変えると「▶」が現れます

１．ドラッグ＆ドロップしたファイルの「▶」をクリックしてください

２．現れたファイルをクリックしてください

画像をゲームに登場させます

１．現れたファイルをドラッグ＆ドロップしてください

２．ドラッグ＆ドロップしたファイルをクリックしてください

３．「Add Component」をクリックしてください

タッチするエリアのパーツです

１．現れた検索ボックスに「box」を入れてください

２．「Box Collider 2D」をクリックしてください

「LeanTouch」のプログラムを加えます

１．もう一度「Add Component」をクリックしてください

２．現れた検索ボックスに「lean drag」を入れてください

３．「Lean Drag Translate」をクリックしてください

回転プログラムをくわえます

１．もう一度「Add Component」をクリックしてください

２．現れた検索ボックスに「lean twist」を入れてください

３．「Lean TwistRotate」をクリックしてください

ピンチのプログラムをくわえます

１．もう一度「Add Component」をクリックしてください

２．現れた検索ボックスに「lean pinch」を入れてください

３．「Lean Pinch Scale」をクリックしてください

クリックで選ぶためのプログラムをくわえます

１．もう一度「Add Component」をクリックしてください

２．現れた検索ボックスに「lean selectable by」を入れてください

３．「Lean Selectable By Finger」をクリックしてください

えらんだ時に色が変わるプログラムをくわえます

１．もう一度「Add Component」をクリックしてください

２．現れた検索ボックスに「lean Selectable Sprite」を入れてください

３．「Lean Selectable Spriterender Color」をクリックしてください

画像を動かすためのプログラムがそろいました

・画像を動かすためのプログラムがそろいました

クリックできるエリアを確認します

OKならばテストプレイで確認してください

１．「BoxCllider 2D」の「△」をクリックしてください

２．ミドリの□をドラッグして画像の大きさにそろえてください

３．ミドリの□をドラッグして画像の大きさにそろえてください

４．「テストプレイ」ボタンをクリックしてください

クリックすると色が変わります

ドラッグするとゲームのパーツを動かすことができるようになりました

１．クリックすると選んだ状態になります

２．ドラッグすると自由に画像を動かすことができます

・まとめ

今回は、「Lean Touch」をつかい、ゲーム中のタップとドラッグの動きをつくる方法を紹介しました

Youtubeでは、さらにおもしろく作り方を紹介しています

また、他のページでもゲームのつくり方について紹介しています

>> Youtubeチャンネル イラスト55 @ クリエイティブ情報を紹介

>> Unityのカテゴリーページ

]]> https://illust55.com/5948/feed/ 0 Unity超初心者講座！無料３D背景のHDRI画像とドラッグで360度パノラマでカメラを動かそう https://illust55.com/5833/ https://illust55.com/5833/#respond Wed, 08 Dec 2021 13:33:51 +0000 https://illust55.com/?p=5833

「かっこいい3D風景をつくりたい」
「ゲームの作り方を知りたい」


でも
「どうやればいいか、わからない」

と悩んでいませんか？

このページでは、だれでも、できる方法でゲームのつくり方を紹介しています

今回は、3Dゲームで背景を表示する方法とドラッグで360度カメラを動かす方法を紹介します

ぜひ、チャレンジしてください

つぎの目次の流れにそって進めます

Youtubeでさらにくわしく、ゲームのつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・Unityをはじめて聞いた方

Unityとはゲームをつくためのソフトです

Unityは世界でもっとも使われているゲームをつくるためのソフトです

公式サイトからインストールプログラムをダウンロードすることができます

＜Unity公式サイト＞
https://unity.com/ja

Unityのインストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

・HDRIとはなんなの？

“wikipedia 参照”

今回、ご紹介するHDRIは360度のパノラマ背景です

HDRIは360度見ることができる3DやVRのための背景です

前だけではなく、後ろ、上、下も背景になります

・無料３D背景のHDRI画像とドラッグで360度カメラを動かそう

・背景の部品をダウンロードしよう

無料の3D背景をダウンロードできるHDRIヘブンにアクセスしてください

１．無料の3D背景をダウンロードできるPolyヘブンにアクセスしてください

https://polyhaven.com/hdris

２．トップ画面の「HDRIs」をクリックしてください

HDRIが現れます

・背景にするHDRIをクリックしてください

「Download」のボタンをクリックするとダウンロードがはじまります

・「Download」のボタンをクリックしてください

・Unityに背景の部品をくわえよう

Unityを起動してください

１．「プロジェクト」をクリックしてください

２．「新規作成」をクリックしてください

３Dのプロジェクトをつくります

１．「3D」をクリックしてください

２．「プロジェクト名」、「保存先」を決めてください

３．「作成」をクリックしてください

ダウンロードした「HDRI」ファイルをドラッグ＆ドロップしてください

１．「Assets」をクリックしてください

２．ダウンロードしたファイルをドラッグ＆ドロップしてください

読みこんだファイルをクリックしてください

１．読みこんだファイルをクリックしてください

２．「TextureShape」をクリックしてください

３．「Cube」をクリックしてください

背景に映すために「マテリアル」ファイルをつくります

１．空いている場所で右クリックをしてください

２．「Create」 → 「Material」をクリックしてください

3Dの背景に「マテリアル」の種類を変えます

１．現れた「Materialファイル」をクリックしてください

２．「Shader」をクリックしてください

３．検索ウィンドウに「cubemap」を入れてください

４．現れた「cubemap」をクリックしてください

HDRIファイルを「マテリアル」に設定します

・HDRIファイルを「Cubemap」にドラッグ＆ドロップしてください

背景の設定ウィンドウが現れます

１．「Window」→「Rendering」→「Lighting」をクリックしてください

２．「Lighting」のウィンドウが現れます

背景を設定します

１．「Environment」をクリックしてください

２．「Skybox」に「Material」をドラッグ＆ドロップしてください

背景が現れました

・「360度」の背景が現れました

※ 画面内でマウス右ボタンをドラッグすると周りを見ることができます

・3Dの背景をドラッグで360度見渡すプログラムをつくろう

このままではプレイ中にドラッグで、360度見ることができません

１．空いている場所で右クリックをしてください

２．「Create」 → 「C# Script」をクリックしてください

プログラムファイルをつくります

ダブルクリックするとプログラムを変えられるソフトが起動します

１．現れた「C# Script」をダブルクリックしてください

２．「Visual Studio」が起動します

次のプログラムを貼り付けてください

ゲーム中に360度カメラを動かすプログラム
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class NewBehaviourScript : MonoBehaviour
{
    public float speed = 3.5f;
    private float X;
    private float Y;

    // Start is called before the first frame update
    void Start()
    {
     
	 }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            transform.Rotate(new Vector3(Input.GetAxis("Mouse Y") * speed, -Input.GetAxis("Mouse X") * speed, 0));
            X = transform.rotation.eulerAngles.x;
            Y = transform.rotation.eulerAngles.y;
            transform.rotation = Quaternion.Euler(X, Y, 0);
        }
    }
}

・もとのプログラムを消して、すべて貼り付けてください

変えたことをセーブします

・「ファイル」 → 「保存」をクリックしてください

カメラのパーツをクリックしてください

・「Main Camera」をクリックしてください

カメラのパーツにプログラムを加えます

・「C#ファイル」をドラッグ＆ドロップしてください

テストプレイで確認してください

・「テストプレイボタン」をクリックしてください

・3Dの背景をドラッグで360度見渡せることを確認しよう

テストプレイで360度、カメラを動かすことができます

・テストプレイ中でも、画面を360度ドラッグして見ることができます

※モバイルでもタップして、画面を360度見ることができます

まとめ

今回は、3Dゲームで背景を表示する方法、ドラッグで360度カメラを動かす方法を紹介しました

Youtubeでは、さらにおもしろく作り方を紹介しています

また、他のページでもゲームのつくり方について紹介しています

>> Youtubeチャンネル イラスト55 @ クリエイティブ情報を紹介

>> Unityのカテゴリーページ

]]> https://illust55.com/5833/feed/ 0 Unity超初心者向け！自分でつくったゲームをスマートフォンでプレイしよう https://illust55.com/5012/ https://illust55.com/5012/#respond Fri, 08 Oct 2021 15:10:23 +0000 https://illust55.com/?p=5012

「スマホのゲームをつくってみたい」
「自分でゲームをつくって自分のスマホでプレイしたい」


・・・でも
「どうやればいいか、わからない」

と悩んでいませんか？

このページでは、だれでも、カンタンにできる方法でゲームのつくり方を紹介しています

今回は、Unityを使いスマホ用のゲームファイルをつくる方法を紹介します

ぜひ、チャレンジしてください

次の目次の流れにそって紹介します

・Unityをはじめて聞いた方

Unityとはゲームをつくためのソフトです

Unityは世界でもっとも使われているゲームをつくるためのソフトです

公式サイトからインストールプログラムをダウンロードすることができます

＜Unity公式サイト＞
https://unity.com/ja

Unityのインストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

次は、Unityでスマホ用のゲームファイルをつくる方法を紹介します

・スマートフォンでUnityのゲームをプレイしよう

・スマホ用のゲームをつくる準備をしよう

Unityを起動してください

１．インストールをクリックしてください

２．インストールしたUnityの右上「：」をクリックしてください

スマホのゲームをつくるためのパーツをダウンロードします

・モジュールを加えるをクリックしてください

Androidのゲームをつくるパーツです

１．「AndroidBuild Support」をクリックしてください

２．「INSTALL」をクリックしてください

・モジュールを加えるが現れない場合は、過去バージョンをダウンロードしよう

「モジュールを加える」が現れない時は、別のバージョンをダウンロードします

・Unityの過去のバージョンをダウンロードできる公式サイトにアクセスしてください
https://unity3d.com/jp/get-unity/download/archive

・下にスクロールしてください

今回は「2020.x」のバージョンを使います

１．「Unity2020.x」をクリックしてください

２．「Unity Hub」をクリックしてください

「開く」をクリックすると、Unityでダウンロードが始まります

１．「開く」をクリックしてください

２．PCにインストールした「Unity Hub」が起動し、ダウンロードが始まります

ダウンロードとインストールが終わりましたら、次に進んでください

・スマホ用のゲームファイルをつくろう

Unityの新しいゲームファイルをつくります

１．「プロジェクト」をクリックしてください

２．「新規作成」をクリックしてください

3Dゲームをつくります

１．「3D」をクリックしてください

２．「プロジェクト名」、「保存先」を決めてください

３．「作成」をクリックしてください

・スマホ用のゲームをつくるための部品をダウンロードしよう

スマホでプレイするゲーム部品をダウンロードする準備をします

１．公式のアセットストアにアクセスしてください
https://assetstore.unity.com/

１．画面の上の「ID」アイコンをクリックしてください

２．画面の上の「ログイン」ボタンをクリックしてください

無料のアセットです

１．「flap up」で検索してください

２．無料アセットをチェックしてください

３．「 Flap Up!」をクリックしてください

自分のアカウントに加えます

・「マイアセットに追加する」をクリックしてください

自分のゲーム部品を表示します

１．「Window」メニューをクリックしてください

２．「Package Manager」をクリックしてください

自分のゲーム部品の一覧が現れます

１．「Packages」の種類ボタンをクリックしてください

２．「My Assets」をクリックしてください

※ これから探すゲームの部品が見つからない場合は青の数字をクリックしてください

ゲームの部品をダウンロードします

１．「Flap Up!」をクリックしてください

２．「DownLoad」をクリックしてください

３．ダウンロード後、「import」に変わります

４．「import」をクリックしてください

ゲーム部品をこのファイルに上書きして取り込みます

・「import」をクリックしてください

ダウンロードしたファイルを取り込みます

・「import」をクリックしてください

・スマホ用にゲームファイルを書き出そう

サンプルゲームが現れます

１．「Assets」 → 「_FlapUp」 → 「Scenes」をクリックしてください

２．「Main」をクリックしてください

３．サンプルゲームの画面が現れます

スマホのゲームファイルをつくります

・「File」 → 「Build Settings」をクリックしてください

ゲームファイルの種類をスマホの「Android」用にします

１．「Android」をクリックしてください

２．「Switch Platform」をクリックしてください

「Android」で使えるゲームファイルをつくります

・「Build」をクリックしてください

ファイル名を決めてください

１．ファイル名を決めてください

２．「保存」をクリックしてください

新しくゲームファイルができました

・ゲームファイルが現れます

・PCの中にAndroidスマートフォンを用意しよう

スマホの中には作ったゲームを運んでプレイするのが難しい時があります

そこで、PCの中で確認する方法を紹介します

PCで動くスマホ「Andorid」をダウンロードします

１．「Android」スマホをダウンロードできるページにアクセスしてください
https://jp.bignox.com/

２．「DownLoad」をクリックしてください

ダウンロードしたファイルをインストールします

１．ダウンロードしたファイルをダブルクリックをしてください

２．インストールが始まります

・ゲームを動かそう

インストールが終わるとアイコンが変わります

・ゲームアプリのファイルをダブルクリックしてください

現れたゲームアプリをクリックしてください

１．アプリファイルが読み込まれました

２．ファイルをクリックしてアプリを起動してください

ゲームをプレイすることができます

・Unityのゲームを起動することができました

・まとめ

今回はUnityを使い、つくったゲームをスマホでプレイする方法を紹介しました

本当の「Android」のスマホでも、プレイすることができます

しかし、プレイストア以外からアプリをインストールできる設定である必要があります

スマホによって方法が少し変わります

他のゲームつくりのページを紹介します

ぜひ、合わせてご覧ください

他のゲームつくりのページ

超初心者向け！Unityでつくる 2Dアクションゲームとアニメーション
https://illust55.com/4055/

2Dアクションゲームのマップと背景のつくり方！Unity入門講座
https://illust55.com/4133/

【入門】レースゲームの作り方＆Unityの使い方と道路アセットの紹介
https://illust55.com/3351/

]]> https://illust55.com/5012/feed/ 0 アドベンチャーゲーム（仮） https://illust55.com/4710/ https://illust55.com/4710/#respond Wed, 22 Sep 2021 08:53:00 +0000 https://illust55.com/?p=4710 https://illust55.com/4710/feed/ 0 AIゲームのプログラム置き場（作成中） https://illust55.com/4509/ https://illust55.com/4509/#respond Tue, 14 Sep 2021 10:06:21 +0000 https://illust55.com/?p=4509 https://illust55.com/4509/feed/ 0 2Dアクションゲームのマップと背景のつくり方！Unity入門講座 https://illust55.com/4133/ https://illust55.com/4133/#respond Thu, 26 Aug 2021 13:46:26 +0000 https://illust55.com/?p=4133

「かっこいいアクションゲームをつくりたい！」
「カンタンにゲームをつくりたい」


・・・と思っても
「どうすればいいか、わからない」

と悩んでいませんか？

このページでは、無料で、だれでも始められる方法でゲームのつくり方を紹介しています

今回は、2Dアクションゲームのステージと背景の絵を、つくる方法を紹介します

ぜひ、チャレンジしてください

次の目次の流れにそって、紹介します

また、このページはシリーズですので、

前回のページから、ぜひご覧ください

前回のページ

2Dアクションゲームのキャラクターとアニメーションのつくり方のページ
https://illust55.com/4055/

・Unityとは何？ゲームをつくることができるの？

Unityとはゲームをつくるためのソフトです

無料です

しかし、世界中で趣味のゲームから一流のゲームまで使われています

Unityで作られたゲームを紹介します

・Unityはどうすれば始められるの？

Unityをはじめるためには、インストールする必要があります

Unityを始めるためには、プログラムをインストールする必要があります

インストールプログラムは、公式サイトからダウンロードできます

＜Unity公式サイト＞
https://unity.com/ja

Unityのインストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法のページ＞
https://illust55.com/2018/

次は、2Dアクションゲームで、

ステージと背景の絵をつくる方法を紹介します

・2Dアクションゲームのマップをつくろう

今回、紹介するゲームつくりです

左のゲームマップを右のゲームマップに変えます

・はじめに用意されているマップを右のマップに変えます

はじめに、 ゲーム部品のダウンロードの準備をします

公式のサイトにアクセスしてください

１．公式のゲームの部品のサイトにアクセスしてください
https://assetstore.unity.com/

１．画面の上の「ID」アイコンをクリックしてください

２．画面の上の「ログイン」ボタンをクリックしてください

背景の絵をダウンロードする準備をします

１．「Foggy Mountains」で検索してください

２．無料アセットをチェックしてください

３．「Foggy Mountains」をクリックしてください

自分のアカウントに追加します

・「マイアセットに追加する」をクリックしてください

ゲームの草や地面などの部品です

１．「Alien Tile Set」で検索してください

２．無料アセットをチェックしてください

３．「 Alien Tile Set」をクリックしてください

自分のアカウントに追加します

・「マイアセットに追加する」をクリックしてください

アクションゲームの部品です

１．「 Metroidvania Controller 」で検索してください

２．無料アセットをチェックしてください

３．「 Metroidvania Controller 」をクリックしてください

自分のアカウントに追加します

・「マイアセットに追加する」をクリックしてください

・ゲームの部品をダウンロードする準備をしよう

Unityを起動してください

１．「プロジェクト」をクリックしてください

２．「新規作成」をクリックしてください

2Dのゲームをつくります

１．「２D」をクリックしてください

２．「プロジェクト名」、「保存先」を決めてください

３．「作成」をクリックしてください

ゲーム部品のウィンドウを表示します

・「Windows」 → 「Package Manager」をクリックしてください

Unityに用意されているゲームの部品を表示します

１．「Packages」をクリックしてください

２．「Unity Registry」をクリックしてください

キャラクターをつねにゲーム画面に表示させる、部品です

１．検索のボックスに「sin」と入れてください

２．現れた「Cinemachine」をクリックしてください

３．「Install」ボタンをクリックしてください

自分のゲーム部品を表示します

１．「Packages」をクリックしてください

２．「My Assets」をクリックしてください

ゲームの部品が多い時は、すべて表示されません

・これから紹介する「ゲームの部品」が現れない場合は、青の数字をクリックしてください

アクションゲームの部品をダウンロードしてください

１．「 Metroidvania Controller 」をクリックしてください

２．「ダウンロード」をクリックしてください

３．ダウンロード後、「Import（読み込み）」をクリックしてください

ダウンロードした、部品をゲーム内に取り込みます

・「Import」をクリックしてください

ゲームマップの部品をダウンロードします

１．「 Alien Tile Set 」をクリックしてください

２．「ダウンロード」をクリックしてください

３．ダウンロード後、「Import（読み込み）」をクリックしてください

ダウンロードした、部品をゲーム内に取り込みます

・「Import」をクリックしてください

背景の絵をダウンロードします

１．「Foggy Mountains 」をクリックしてください

２．「ダウンロード」をクリックしてください

３．ダウンロード後、「Import（読み込み）」をクリックしてください

ダウンロードした、部品をゲーム内に取り込みます

・「Import」をクリックしてください

サンプルのゲームを表示します

１．「Assets」 → 「Scenes」をクリックしてください

２．「Demo」をダブルクリックしてください

３．サンプルゲームが現れます

プレイヤー以外は、つかわないので、消してください

・はじめに、プレイヤーの「DrawCharacter」以外を消します

「Delete」キーで消すことができます

１．プレイヤーの「DrawCharacter」以外を選んでください

２．キーボード「Delete」キーをおしてください

ゲーム画面に絵をおく準備をします

１．「Windows」 → 「Tile Palette」をクリックしてください

２．「Tile Palette」が現れたことを確認してください

地面のパーツが現れます

１．「Assets」 → 「Tile Palette」をクリックしてください

２．「GroundTiles」をクリックしてください

３．「GroundTiles」のパレットが現れます

絵をおくためのマス目のオブジェクトをつくります

１．左ウィンドウの空いている場所で右クリックをしてください

２．「2D Object」 → 「Tile map」 → 「Rectangular」をクリックしてください

ドラッグ＆ドロップで、絵をおくことができます

１． 現れた「Tile map」 をクリックしてください

２．地面にする絵をドラッグしてください

３．画面をクリックすると、絵をおくことができます

今回は、このようにつくりました

・今回は、このようにマップをつくりました

絵が重なるときは、「 Order Layer 」の数を変えてください

１．「移動するツール」のボタンをクリックしてください

２．「Assets」 → 「AlienTileSet」 → 「Splites」 → 「Trees」をクリックしてください

３．現れた木のパーツをドラッグ＆ドロップしてください

４．「Order Layer」に「-100」を入れて、木がプレイヤーの後ろになるようにします

マップを今回は、このようにつくりました

・今回はこのようにつくりました

背景を画面におきます

１．「Assets」 → 「Foggy Mountains」 をクリックしてください

２．現れた、背景のパーツをドラッグ＆ドロップで置いてください

空のパーツをおきます

・続いて、空のパーツをドラッグ＆ドロップしてください

大きさを画面に合わせてください

１．画面左上の「拡大・縮小」ボタンをクリックしてください

２．背景の「Mountains」と「Sky」をドラッグで、二つ選んでください

３．現れた、矢印をドラッグして、背景を拡大してください

地面の絵にキャラクターが立てるようにします

１．「Grid」 → 「Tilemap」をクリックしてください

２．「Add Component」をクリックしてください

プレイヤーが立つための土台を、自由につくれるパーツです

１．検索のボックスに「poly」を入れてください

２．現れた「Polygon Collider 2D」をクリックしてください

カドをドラッグすると形を変えることができます

１．「Edit Collider」のボタンをクリックしてください

２．現れた五角形の形を変えます

３．カドをドラッグすると形を変えることができます

緑のラインの上をクリックすると、新しいカドが現れます

１．つくった地面と同じ形にドラッグします

２．緑の線の上をクリックすると、新しいカドができます

今回は、このような形につくりました

・このような形につくりました

・プレイヤーをつねに映すゲーム画面をつくろう

カメラをつくります

１．左ウィンドウの何もない部分で、右クリックしてください

２．現れたメニューの「Camera」をクリックしてください

カメラをおいかけるパーツです

１．画面上の「Cinemachine」をクリックしてください

２．現れたメニューの「Ceate 2D Camera」をクリックしてください

プレイヤーを追うようにしました

１．現れたメニューの「CM vcam1」をクリックしてください

２．「Follow」にプレイヤーの「DrawCharacter」を、ドラッグ＆ドロップしてください

３．「Screen Y」に「0.6」、「Dead Zone Height」に「0.7」を入れます

※ カメラをタテ方向に動かなくさせ、位置を調整します

カメラと背景が、同時に動くようにつくります

・「Mountains_1」、「Sky」を二つクリックして、選んでください

カメラの動きに合わせるようにつくりました

１．「Mountains_1」、「Sky」を「Camera」ドラッグしてください

２． 「Camera」 でマウスを離して、「Camera」の中に入るようにしてください

・テストプレイで確認しよう

テストプレイをして、つくりを確認してください

１．テストプレイボタンをクリックして、つくりを確認してください

２．プレイヤーが地面の上を移動して、背景がプレイヤーの動きについて来るようになりました

左は、前回紹介しましたプレイヤーを変える方法と、今回を合わせた画面です

右は、「Alien Tile Set」のパーツをおいた画面です

多くのきれいなパーツがあるので、ぜひ試してください

前回のキャラクターとアニメーションのページをご案内します

＜前回のページ＞
2Dアクションゲームのキャラクターとアニメーションのつくり方のページ
https://illust55.com/4055/

・まとめ

今回は「Unity」の2Dアクションゲームでマップをつくる方法とカメラのつくり方を紹介しました

このブログでは、他のページでもゲームつくりを紹介しています

ぜひ、合わせてご覧いただき、チャレンジを続けてください

他のゲームつくりのページを紹介します

ぜひ、合わせてご覧ください

見出し

超初心者向け！Unityでつくる 2Dアクションゲームとアニメーション
https://illust55.com/4055/

UNITY初心者！Karting MicroGameでオリジナルマップを作ろう第四回目
https://illust55.com/3631/

超簡単にゲームプログラミング！UnityとBoltの使い方＆ゲーム制作初心者講座
https://illust55.com/3889/

【ゲーム制作超初心者＆Unity入門】パズルゲームの作り方を学ぼう
https://illust55.com/2469/

ここまで、ご覧いただきまして、ありがとうございました

]]> https://illust55.com/4133/feed/ 0