Zenn
Open5

意地でもReactNativeでカジュアルゲームを開発したい！の巻

sdanshitasdanshita

できるかはともかく、ReactNative（Expo）でカジュアルゲームを開発するべく試行錯誤していく。

前提として以下を想定
・極力タッチ操作しか行わない
・複雑なオブジェクト、状態を考えない
・物理演算しない、2Dしか使わない
・（ほぼ）クライアントで完結する
・よくある、ステージレベルが無限に上がっていくやつです
・使えるアセットは極力使って「映え」「それっぽさ」を出す
・課金、広告要素を入れる

sdanshitasdanshita

Dall-e-3→Figmaで画面イメージを固めていく。
ゴリゴリの海外製カジュアルを目指す
・フォントはCherry Bomb Oneが良さげ
・テキストの見栄えを最優先でレイアウトしていく
・CSSオンリーで済ませたいのでシャドウをゴリゴリに使ってUIっぽさを目指していく
・画像は添えるだけで済ませられるように配置を考える

sdanshitasdanshita

思っていること

  • ゲーム画面はSkia使うのかな
  • Canvasを操る自信ない
  • かといって積極的にメンテされてるゲームエンジンライブラリみたいなのもない
  • アニメーションどうするんだろう　Reanimation?LottieFile？（聞き覚えあるくらい）
sdanshitasdanshita

UIライブラリ選定は以下を参考にさせていただいた
https://zenn.dev/u_motion_tech/articles/092d09f7cfd592

所感

  • NativeWind(Like a Tailwind) をベースにしたライブラリが多いかも？
    • gluestack-ui
    • react-native-reusable

基準

  • バキバキにスタイルをいじるので、フルスタックな（Styledな）ライブラリは逆に面倒そう
    • Tamaguiとか
    • react-native-reusableとか
  • Unstyleなライブラリってことで、今回は gluestack-ui がよさそう
    • shadcn/ui と同じような思想で、UIが分離してる（コピペコンポーネントを謳ってる）
    • NativeWind だけで始めるよりも時短になりそう（自分はRN初心者なので、確実になる）
    • とりあえずプロトタイプを作って、後追いでUIをバキバキにしていく今回の作り方にハマりそう
    • FigmaのDesignKitもある、神？

https://gluestack.io/

sdanshitasdanshita

Recraft AI の Image set が便利

  • Dall-e-3しか使ったことなかったが、RecraftAIというのが多機能でよいとの噂を聞き色々試してみた
  • アイコンとか、「こういう作風で統一したい」という要件を満たすためにプロンプトで縛るのは限界があるが、「ImageSet」を使用すると選んだテーマで作風を統一してくれるらしい
  • ほんとにそんな上手い話があるかよ、と思って試した結果が以下

いや、すごいな。やりたいことできた。あとはこれを透過して・・・と思ってレイヤー選択したら・・・

いやもう透過されてるんか～い！何その技術。今まで知らなかったことを後悔するレベル。
しかも、ちょい使いなら無料枠でいける。Dall-e-3とは・・・？

今日は以上。