通信対戦可能なドンジャラができるまで
何から話せばよいのやら。
ドンジャラのレシピ
今回の一連の事件を整理しました。
①まず1人プレイ用のドンジャラをつくります。(3週間)
②次にネット対戦を準備するためにNode.js環境を構築します。
③ローカルサーバーでテスト環境を用意します。(②と③を理解するまで半年)
④1人プレイ用のドンジャラを通信対戦用に改築します。(3週間)
⑤HerokuやGlitchなどの置き場に公開します。
ドンジャラについて
プログラム
中身を説明する語彙力がない&効率を度外視したゴリ押しが恥ずかしいので控えめに。
とりあえず迷ったら大体if文書いてます。ifまみれです。
そういえば今までは「マウスが押された時」に判定していましたが今作では「クリックした時」に判定しています。
それぞれのパイは0~44の番号を振ってあり、全て数字で管理しています。
キャラクターは3で割った商、ラインは3で割った余りで、
判別してたりします。中身はとっても原始的です。
ロゼの順番がノアよりも後になっているのはそのためだったんですね。
描画
普通に備え付けのcanvas機能を使用。複数のcanvasを重ねておくことで擬似的にレイヤー機能が使えます。5枚使用。
・createJS
これはほぼ作り終わった後に知ったのですが
canvasで画像描画をしやすくしてくれるライブラリがあるみたいです。
従来のcanvas
createJSは従来のcanvasと併用でき、
トゥイーンを使えばaviutl並みに楽にアニメーションが作れます。
トゥイーンを使ったアニメーションはこちらが一番分かりやすかったです。
https://ics.media/tutorial-createjs/tween/
音楽
Howler.jsを使用。
通信対戦機能について
初めての試み。右も左も分からず、オンラインドンジャラ実装した先人の姿も見つけることができなかったため、
まずはそこそこ前例ありそうだったチャット(オンラインチャットアプリ)を参考にすることに。
その方向で調べていて、文章読んでもわけがわからず自分を攻撃していましたが
動画を見ながらとりあえず見た通り写す作業をしているうちに
少しずつ何が起こっているのか分かってきました。
こちらのyoutubeの動画を参考にしました。
Node.jsアプリをHerokuを使ってデプロイ(公開)する方法 -Node.js入門-
https://www.youtube.com/watch?v=5wrZ1LwE2os
結局何に一番困ったかと言われると最初の環境構築だったような。
自pcに何がどこまでインストールされてるのかも知らず、
調べた先々で違うこと書いてあったりするしで心「う~~~っ!」でした。
諦めずに続けることだって厚塗り風景画の神絵師が言ってました。
もともとvsCodeを使用していたので続投。
Node.jsの環境構築
javascriptを使ったサーバー通信についてはNode.jsが良さそうということで
インストール。続けてexpressとsocket.ioというものを導入。
ディレクトリ移動を知らなかったので新しいフォルダが3つも犠牲になりました。
ローカルサーバーの環境構築
ポート3000番がどうとか言う話。
適宜「Node.js」「Express」「Socket.IO」あたりでキーワード検索して出たサイトを参考にしました。
・server.jsとindex.htmlと、作っておいたドンジャラのフォルダを用意。
・サーバー、クライアント、ターミナル(コマンドプロンプト)、ディレクトリなどの
用語の意味をこの辺で何となく理解。
・nodemonやgitなどをインストール。
・vsCodeでpackage.jsonを開いてdev:nodemon(?)付近を押すなどしてローカルサーバーを立ちあげる。
・ブラウザでlocalhostの3000番を打ち込む。
GithubとvsCodeの連携
Githubに置いておくと旅行先でも別PC使って作業できたので非常にありがたかったです。
もっと旅行を楽しんでください? はい……。
対戦モードの中身
まず接続人数を表示するところで詰まりました。
なんやかんやあって対戦ルームとロビーまでたどり着けました。
それぞれのユーザー画面で違う画面を表示しなければいけないですよね!どうやるんですか!
という部分でめちゃくちゃ詰まりました。
ホスト(ルーム長)の画面を基準にしてそこからメンバーリストをnずらしています。
サーバー側でゲームに関して何か判断することはしておらず、
それぞれのクライアント(PC)内でターン回しや各種判定を任せています。
パイが切られた時、山札が変化した時、ポン・ロンなどのイベントが起きた時などに、
その都度他の人と情報を同期しています。
CPUは、複数CPUに切らせると違うパイを切るおそれがあったのでホスト内だけで判断しています。
各プレイヤーのターン操作に関しては画面表示の部分ほどは詰まりませんでした。
というより実はあまり考えすぎなくてもよかったみたいで、「Cpuがパイを切る」部分を「待機する」に変えるだけでほぼほぼ周ってくれたので正直「まさか・・・ここまでとはな・・・。」と思っていました。
参考にしたもの
Node.jsの環境構築https://labo.kon-ruri.co.jp/setup-nodejs/
準備:Node.jsのインストール・package.jsonの作成など
https://zenn.dev/harryduck/books/a57c98402810a9/viewer/
64fcd6#package.json%E3%81%AE%E4%BD%9C%E6%88%90
はじめてのSocket.io #1「リアルタイムなチャットを作る」
https://blog.katsubemakito.net/nodejs/socketio/realtime-chat1
ホームページ工事記録
CSSっていうのを知らないので大体ネットを漁って見つけたコードをコピペ……参考にしています。
ダークモード
クリックすると文字と背景色が変わる。OSの設定でブラウザのダークモードがオンになっているかどうかも調べてくれるらしい。ついでに画像をランダムに差し替える仕様を追加。
トップに戻るボタン
ある程度スクロールすると、トップへ戻るボタンがじわじわ表示される。元々この機能はFC2ホームページのひな型についていたようなのですが、使い方が分からず……。調べてみたらボタンを設置していなかっただけでした。白い丸ボタンは見づらかったのでミカンの画像を用意してみました。
タブ切り替え
3Fでストーリーの切り替えボタンに使用。これもネットに載っていたコードをコピペしてきただけなので何が起こっているのかよく分かっていない。
クリックで展開ボタン
クリックすると記事が見られる仕様。idというラベルを貼りつけておいて、クリックされた時に対応するラベルの記事のdisplayのstyleを切り替えているっぽい。
背景画像
background:url("画像")で指定。gifも指定可能。position:coverに設定するとなんかいい感じに拡大してくれる。加算、乗算などのフィルターも設定可能。
カルーセル
HPの画像がスッッ・・・スッッ・・・って切り替わっていくやつ。「カルーセル」で検索して出てきたコードをコピペ。中身はよくわからない。
AI絵のこと
最近よく議論を見かけるので。
AI絵の問題点
AI絵に関してはいろんなところで議論されてますね。一般人目線でも興味を引く話題だなと日々感じています。
とりあえず問題点が多すぎるというのが正直な感想なので一旦羅列してみます。ただし深入りするつもりはないです。
①AI技術に関する法整備に起因する問題
→AI提供側の立ち位置は「基本的に全て自己責任」
→絵師さんが描いたイラストがAIに無断転載・学習されている問題
→AI絵の権利問題
②AI絵と人間が描いた絵の区別がつかない事に起因する問題
→AI絵で描いた絵をAI絵だと明言せずに投稿する行為、またそれによって利益を得る行為の横行
→人が描いた絵に対する「それAI絵で描いた絵ですよね?」というクレーム・批判
→イラスト全体に対する懐疑心
③その他の諸問題
・人が描いた絵とAI絵とを比較したがることによる仁義なき論争
・誰でも簡単に絵が描けてしまうAI絵に対する嫌悪感
・イラストによって収益を得ている業種への経済的・社会的打撃
・イラストサイトに大量生産されたAI絵が掲載される、ある種の汚染
・界隈全体での創作活動の相対的・絶対的な萎縮
問題点に対して思うこと
①について:実際AIは便利ですし、AIが悪いと言うつもりはないです。ただ、AI絵に関する法整備がまだまだ未熟な段階でこの機能がリリースされたことに関しては若干疑問を感じています。まあでも出てしまった以上は適応していくしかない気がします。
②について:AI絵と人間絵の区別に関しては難しいですが、一番は各々が個性を出すことが重要になってくる気がします。(この件は後で詳しく触れます)。
②の続きにいろいろ書いてますが、この辺は、自分が評価されたいという承認欲求、自分よりも絵が上手な人に対する嫉妬が根底にあるんだろうな……と思っています。趣味全般に言えることですが、目的や動機が「楽しいから」「上手になりたいから」→「評価を貰うため」に変わってしまうことが少なくないです。もちろん他人から評価されることはモチベに繋がりますが、気持ちが行き過ぎると
「もっと評価されたい」
「あの人は自分よりも評価されている」
「どうして自分は評価されないんだ」
「自分を評価してくれないこの世界が悪い」
「世界を全てぶっ壊してやる」
などとなりがちです。闇堕ちする前に、定期的に何のために趣味やっているのか見つめ直したり、友達と趣味を共有するといいと思います。
個性を出すためのアイデア
ここからは前向きな話です。絵に個性を出すアイデアと言っても、自分は絵描きではないので「個性的な目の描き方」とか「個性的な色づかい」といった話はできません。ふと思いついたことをつらつら……つらつら……。
①タイムラプスを記録する
絵の一部始終を記録しておけば、ある程度自分が描いた証明に使えそう……というのもあるのですが、自分で自分のタイムラプス見るのが楽しい。何、タイムラプス機能がない!? アイビスペイントはいいぞ。(ダイマ)
②過程で無駄な動きをする
AIは無駄な動きをしません。だからこそ、絵を描く時はいっぱい無駄をしたほうがいいと思います。あえてボツラフとか差分を並べてみたり、別のレイヤーに「つかれた」とか落書きしてみたり。ラプスを見てもらう前提であえてこういう遊びを入れるというのも面白いかもしれません。
③アナログを楽しむ
AI絵のコピペがしようがないアナログ世界も信頼度が高そうです。色鉛筆、砂絵、影絵、ラテアート、トーストの焼き模様、いろいろありますアナログ絵(エミ教並み感)。
最後に
自分が一番心配しているのは絵に限らずAIの影響で個人の創作活動が萎縮してしまうことだったりします。今後AIでもっともっといろんなことができるようになることが予想されるので(音楽なんかは波が来てる感)、それに取り込まれるかうまくAIを利用して共生していくかどうかは個人次第かもしれません。……というそれっぽい言葉でまとめておきます。(良識の範囲内で)ありのままの自分をさらけ出していけ(遺言)
えるめど
ストーリー読んだ感想とか考察とか
まだ全部のエピックを見ていないので回収済みの話があるかもしれないです。
エルスストーリ―の感想
・エルス家の時系列
①エルカシュ(パパ)が家を出る。
②エリシスがエル捜索隊を歴代最速で卒業する。
③パパが家を出てから4年後にエリシスが旅に出る。
エルカシュからベルダー内戦への加勢を要請された模様。
この時点でエリシスは捜索隊を卒業したて。既に天才と呼ばれている。
④↑から3年後。エリシス凱旋。スカー襲来。
スカーからも赤い騎士と呼ばれるほど有名人。このあとエリシスは再び旅に出る。
⑤エルスがエル捜索隊に歴代最年少で入団する。
⑥物語開始時点。エルス13才、エリシス16才。
多分こんな感じ。で、⑤のエルスが最年少で入団というのがいつなんだろうという話に。
エルスのチュートリアルを見ると、エル捜索隊に入隊~物語開始時点がそんなに時間経ってなさそう
→12~13才くらい?
エリシスがベルダー内戦に召集~スカー襲来までの期間が3年って明言されている
→エリシスが卒業したのは少なくとも13才以前で、入団はエルスよりも遅い。
ということは……?
真面目に考えると歴代最年少といってもエリシスよりちょっと早いくらいなんじゃないかと。例えばエルス12才、エリシス12才6ヵ月とか、例えばなんですけど。
ねぇちゃんが爆速で卒業したというのが数週間~半年くらいって推測するとエル捜索隊は1~2年ぐらいで卒業が標準コースなんじゃないかと思いました。
あでもエルスくんは入団時に骨折していたので入団~活動開始の間にタイムラグがあった可能性も……?
結局のところ、入団試験がエルを感じる力を試している→エルスはエリシスよりもエルを探す力に長けているということを表すための『歴代最年少』という表現なのかもしれないです。
・エルスが戦ったモンスターについて
シルエット見たのですがこれ何のモンスターだ……? ちょっとオベザールに似ている気もしますがプオブラム亜種ですかね。分かりません(諦め)
アイシャストーリ―の感想
・5才にして火遁豪火球の術を……見ただけで覚えただと……? やはり天才か……。・マティくん
・漁師の息子。初見マルフォイみたいな人だと思いました。
・おらぁ詳しいんだ、こういうヤツに限って簡単に裏切るんだぜ。ヘニル一味に混じって敵対するも死に際にアイシャに「あの時治療薬くれてありがとう」って言おうとして言い切れずに黒幕にトドメを刺されて成仏するんだぜ。エリオスはショタに厳しい世界だからな……。
・ティタニアアさん
・まだヘニル教団に入ってなかった頃のティタニアアさん、もしくはよく似た別人。本編でこの人も生死不明っぽい退場の仕方したので生きてますよこれは。
イヴ様ストーリ―の感想
・ナソードの女王とめぐるアルテラの旅。ドキュメンタリー番組にありそう。
・モビとレビの顔文字
そういえば改変後のエピックでも顔文字でしゃべる(?)ようになった。イヴ様モビとレビに顔文字を教えているのかな……。この顔文字の記号を探すの地味に大変でした。
ヴンニキストーリ―の感想
・ヴンセリの尊さに暴れ出す患者。セリスのカラーな立ち絵が出たため髪の色もレナさんにそっくりだということが判明しました。使う武器は剣。そして決闘民。
・ナソードの侵食に抗っている感じがめちゃ表現されててビビりました。ゲーム内ではレイプ目兄貴が見れます。よろしくお願いします。
・オーウェンのフルネームについて
レイヴンの物語のほうで判明した彼の名前はオーウェン・ヘルフォードなのですが、綴りはFelfordなのでヘルフォード家はラシェパパとは関係ないようです。南無。
レナストーリ―の感想
・シンディ→グラチェ次元ですかここは・「森では火気厳禁よ!」→某天才魔法使いさん……。
・「あなたは精霊が見えるのね!」→あぁ! それってハネクリボー? がよぎったら決闘者。
・レナの手に眩しい光が宿った→全く関係ないんですけど、某テニヌ漫画の「滅びよ…」がよぎってしまい笑ったところ。
・時系列について
・村のはずれの家にエルスが一人で住んでいたことが判明している→エル捜索隊の寮に入っていない→エルスが捜索隊に入団するよりも前です。
・レナが戦っていたモンスターについて
・イラストはハーメルに出てくるシャドウチャージャーのように見えるのですが、「口からビームを発射する」「顎が弱点」などの文章の描写から察するにダークネピリムの亜種ではないかと思われます。
・森には他に人がいなかったとのことなので、誰かが召喚したのではなく、自然にやってきたんだと思います。もしかしたら闇の森とかマルデンの森辺りから入ってきたのでしょう。
・「ルーベンで昔もあんなモンスターが沸いていた~」話は精霊の安息所に出てくるネピリムの子供のようなヤツなのかもしれません。むかし闇の森にモンスターが大量に出現したことがあったそうなのでそのことを指している気がします。
・本編でレナが目撃したエルフについて
・魔界でエルフを見た!的な話をどこかでしていましたが、おそらくルア(レナの友達)だと思われます。ルアがこのモンスターによく似たモンスター(=たぶんダークネピリム)にやられた→ダークネピリムはバニミール原産→ルアが生き延びて魔界にいる可能性はあると思います。
・瞳の色、年齢不詳、精霊との親和性、何かとルーベン村のアンと共通点が多いです。確証はありませんがアンの双子かもしれません。それともルーベンの女の人はみんなそんな感じなのかもしれません。だから何だと言われると……特に何もないです……。
エリオス次元、エルスター次元
語彙力が無さ過ぎてまとめて次元って書いてますが、時空とか世界線とか好きなように読みかえてください。
エリオス次元、エルスター次元、エリオスシティ次元の雑記です。
・エリオス次元(本編)
正史。剣と魔法の世界。ここ話はじめたら終わらないのでカット。
・ルナロス次元
エルソードM(Shadow of Luna)でエルス達が飛ばされた次元らしい。おま国。
水色の髪の巫女っぽいキャラクターはレイナさんというそうです。
月にゆかりのあるキャラクターが本編に参戦したけど関連無さそうだしきっとここは忘れられた聖所。
・ヘッジホッグ次元
エルス達がヘッジホッグになっちゃった!っていう世界。パラレルワールド?
もしかしたら大根ペットの中身はこの次元のエル捜索隊かもしれない。
すみっこのエビフライと並べてみたい。
・ベルダー学院次元
全員学生してる次元。マスター達が先生やってそうな妄想をしている。
あのベンダース先生が逆関数の微分を教えているあたり何気にえげつない学院。
学パロはエルタイプ時代にもあったみたいで、そっちにはステラ(オイソトハキケンダーの人)が先生してました。
・エルスター次元
またエイプリルフールネタかと思いきや本気でコンサートまで行われ全エルソ民を嬉し泣きの涙でできた沼に溺れさせた次元。
最近トリニティーエースがテトリスになった。何を言っているのか分からねーと思うが(ry
ベルダー学院と同じ次元かもしれない。学園に通いながらアイドル活動してそう。穏やかじゃないわ……?
日常は現実世界に近そう。エルとか魔法とか、その辺りは存在している説。
ファンタジー要素は正史とハートエル次元の間ぐらいな気がする。
・ハートエル次元
エル捜索隊はヒドゥンクラウドという団体をつくっており、ハーモニーブリスと契約して魔法少女になって人知れずマモノ(魔獣)と戦う、奇跡も魔法もある次元。魔獣はエリオスから攻めてくるらしい。
ベルダー学院の代わりにエリオスシティ学院が出てきてて、設定見てるとエルスター次元とはまた違うみたい。でもインタビュー動画で兄貴がベルダー学院のジャージ着てたような気もする。
日常生活はかなり現実世界に近い感じがする。
ゲーム制作について考えた日
TRPG vs ツクール系 vs プログラミング
作るジャンル別の感想
javascriptについて
の3本でお送りします。ゲーム作りはゲームを遊んだことのある人にとってはロマンだと思います。
・TRPG
必要なもの シナリオ、複数の友だち
利点:プログラミングの知識やソフトが無くても手軽にできそう。欠点:一緒に遊ぶ人と想像力が必要。
・ツクール系
必要なもの ソフト、多少のプログラムの知識
利点:一からプログラミングするよりも作りやすい、素材があらかじめ用意されている。頑張れば自由に作れそう。欠点:自由度が低いソフトでは作れるジャンルが限られる、自由度が高いソフトでは触れるものが多すぎてとっつきにくいかも。
最近はRPGアツマールとかあるし遊んでもらいやすそう?
・プログラミング
必要なもの PC、エディタ、プログラミング知識
利点:その気になれば何でもできる(ん?今なんでもって) 欠点:素材も全部調達する必要がある、最初に慣れるまでが難しい。プログラミング知識と、詰まった時に何が分からないのか調べる能力も問われる気がする。
自分はbasic少しかじった程度で、あとはjavascriptしか触ったことがないです。他だとC言語とかC#とかC++とかって聞きますけどどうなんだろう。てか名前似てて中身別物って言うのが多すぎませんか
そういえばUnityってゲームエンジンをよく見かけますが、最近はUnityでjavascriptが使えなくなってC#一択みたい。ブラウザ上で動く、いわゆるフラッシュゲームみたいなのがつくりたいならhtml5+javascriptがやりやすい。
有償配布など本格的にやるならC#で、手軽にやるならjavascriptがいい気がします。
でも無知の素人なので全く自信は!ないです!
ジャンル別の感想
・パズルゲーム ★☆☆☆☆
例)パ○ドラとか、テトリスとか、じゃんけんゲームとか。
音楽や画像の素材があまり必要なく、比較的単純なゲームで、しかもそれなりに遊べるのでコスパがいい。初心者におすすめ。探せば他の人のつくったソースも見つけやすい。
・テーブルゲーム ★★★★☆
例)トランプとか、オセロとか、麻雀ゲームとか。
カードや牌などの素材はフリー素材も多い。敵が必要なためにコンピュータのAIを組む必要があるので、初心者には向かない気がします。
・脱出ゲーム ★★★☆☆
例)脱出しよう。
音楽は必要ではないが、必要な画像素材が半端ない。シナリオもそれなりに練らないと面白いものは作れない。プログラミングはそんなに難しくない。主観。
・ノベル ★★☆☆☆
必要な音楽素材、画像素材はそれなり。学校などの背景、環境音などはフリー素材があります。が、R18作品に使用が禁止されているものもあるので要項を読みましょう。プログラミングはフラグ管理さえできれば難しくなさそう。キャラ設定と、一枚絵をかく画力と圧倒的な語彙力の方が大事そう?
・RPG ★★★★★
例)冒険してバトルしてなんやらかんやら
必要な音楽素材、画像素材が多い。シナリオも練らないと、長く面白いものは作れない。バトルをオリジナルにするならプログラミングも難しい。一から作るとしたら一番大変なので、RPG作りたいって人はRPGツクールやウディタなどで一度作ってみると感覚を掴めると思います。
javascript
javascriptだけはいろいろ触ってきたので自分用にメモしておきます。
・個人的にはCよりはとっつきやすかった気がします! 分からないことがあったら調べれば何となくやりたいことは出来ます! 配列っていう概念を理解できると楽しくなる!
・javascript=「ホームページを動かす」イメージかもしれませんが、普通にブラウザゲーム作ったりできます。
htmlとCSSとjavascriptは違う CSSはHPのデザインや枠組み、体を作るもので、javascriptは体を動かすもので、そういうの全部まとめてhtmlっていうでっかい枠の中に入ってる感じだと思う。よく分かっていない。
・javaとjavascriptは違う 全く別物だそうです。javascriptは元々違う名前だったのですが、「javaが有名だからjavaってつけとけば流行るんじゃない」みたいなノリでパクったらしいです。
・jQueryって何? jQueryはライブラリの一つらしく、ホームページのデザインをする際に、javascriptと併用して使えます。ゲーム作りにはjQueryは使えません。たぶん。というかよく分からないので使っていません。です。
・(ライブラリ)create.jsはcanvas使うなら便利 canvasというのはjavascriptで図形や画像、テキストを書くシステムなのですが、普通に使っているとコードがとても長くなります。canvasはよくウォールペイントに例えられます。一度書いた図形に重ねると上書きされてしまう、アニメーションするなら描いて消してをループさせる必要がある・・・などなど。レイヤーも擬似的に使えると言えば使えるのですが、管理が大変です。
create.jsは一度書いた図形を変数管理してくれる、レイヤー分けがややこしくない、描いたら自動的に更新してくれるなどの機能が使えるようです。便利!(使っているとは言ってない)
・(ライブラリ)音楽にはHowler.jsが便利 普通の<audio>だと音が切れたり遅れて聞こえたりして困っていたのですが、ネットを漁っていたらこんなものが。ただし、音量を小さめに設定する必要あり。
・local storage、document.writeには注意? データのセーブの際にローカルストレージを使っていいのかどうか、いろいろ調べたのですがよく分かっていません。イマイチどこに保存されているのか分からない。document.writeはコンソールで使うなって言われるので使わない方がいいみたい。
・調べても分からないこともある javascriptはそこそこよく使われているのでネットで探せば情報はかなりでてきます。サーフィン始めると沼にはまって余計に訳が分からなくなるから気をつけよう(戒め)
更新履歴
- 2020年 6月 8日地下を改築しました Hello Elios
- 2021年 3月 27日雑記をまとめました Welcome Back
- 2022年 9月 4日雑記が増えました 増殖するZ
- 2022年 10月 25日雑記が増えました 増殖するZ