スポンサーリンク

Scratchで作ったゲームをデスクトップアプリにしてみた【Electron】

当サイトではアフィリエイト広告を利用して商品を紹介しています。

Electron

Scratchをデスクトップアプリ化してみた

今回は、タイトルにもある通り、Scratchで作ったゲームをデスクトップアプリにしてみました。今回デスクトップアプリ化した作品はこちらです⬇️

Scratchでモンテカルロ法を使ったリバーシを作ってみた【...
今回は、自分がScratchで作った、モンテカルロ法を使ったリバーシに...

なぜやろうと思ったか

実は、最近イラストを勉強していて、そのイラストの練習アプリを作ろうと思っていたのですが、

Pythonなどの言語で作ると、自分の実力不足ゆえに完成までかなりの時間を要すると思ったので、

一番得意なScratchでアプリを作ったらどうだろうと思ってチャレンジしてみました。

Scratchの作品をデスクトップアプリ化するメリット

メリットは、

・パソコンの全画面でプレイできる
・公式のScratchサイトよりも軽い
・Mac、Windows対応(Linuxは試していないですが多分できるはず…)
・ロマン
・オシャレ、かっこいい(ロマン)

こんな感じです。

正直、turbowarpを使ったら上二つは実現できるのでほぼロマンです…。

ただ、アプリ単体だけでスッキリするのはあるので、そこらへんはいいかもしれません。

Electronを使ったアプリ化は自分が初?

Googleで調べると、Androidなどのアプリ化はよく取り上げられているのですが、デスクトップアプリ化は紹介されていないのでもしかして自分が初めて?(dmg)とかおもってます。

(自分が検索で見つけられなかっただけかもですが…。exeファイルとかはありましたね。)

Electronを使うと、Electronだけでマルチプラットフォームのアプリがビルドできるのが便利ですね。

アプリ化した方法

使ったもの

・Electron
・TurboWarp

手順

まずはScratchで作った作品をTurboWorpでJavaScriptに変換し、それをElectronに読み込ませてMacアプリ、Winアプリをビルドします。

上の画像がMacでアプリをElectronを用いて実行した時の様子です。ちゃんと音も出て、動作もちゃんとしているので問題なさそうです。

今回のアプリはScratch公式サイトで作ったので画面サイズが小さくて、PC画面にあっていない縦横比ですが、今後はTurboWarpを使って画面サイズを1920x1080(フルHD)にしようとおもっています。

またその時は記事を投稿するのでお楽しみに。

自分もフルHDの作品をScratchで作れると思うとワクワクしてきました。

おまけ

インストーラーを使ってみる

ビルドしてできたファイルです。

赤枠で囲ってある二つのファイルが実行アプリのファイルです。

上のexeファイルがWindowsで実行できるファイル、下のdmgがMacで実行できるファイルです。(正確にはインストーラー?)

残念なことに今WindowsPCが起動しなくなっているのでWindowsは試していないのですが、Macでためしてみました。

dmgファイルを実行すると…。

よくみる画面が出てきました(Macを使う人ならわかるw)

アプリをアプリケーションフォルダにドラッグ&ドロップ。

アイコンはまだ設定してないですが、今後設定してみます。

今回はお試しなので。

アイコンを想像するだけで結構ワクワクします。

アプリケーションフォルダに追加されましたね。クリックして実行してみます。

ちょっと起動には時間がかかりました。

(2回目以降は早く行きました。1回目はElectronや他のライブラリをインストールしていたのでしょうか…?Electronの仕組みについてはまだ知らないので憶測ですが。)

無事起動できました!

まとめ

ということで、今回はScratchをElectronを使ってデスクトップアプリ化してみました。

比較的簡単にできるので、遊び程度にやってみるのも楽しいと思います。

今度は、今構想を練っているお絵描き練習アプリをデスクトップアプリ化してみようと思います。

SNSでのシェアよろしくお願いします!

Scratchで拡張機能などを一切使わずにニューラルネットワ...
外部ライブラリなどを使わずにニューラルネットワークを作ってみました。P...
【凄すぎる】Scratchで作られた2D版マイクラの再現度が...
Scratchで作られた2D版のマインクラフトをご紹介します。Scra...
第26回 CoderDojo太宰府に参加してきました!【オン...
今回の道場 今回は、初参加であるCoderDojo太宰府に参加してき...

コメント

タイトルとURLをコピーしました