だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ： Web









よろしくお願いします！！

会期: 11/18〜12/10
場所: https://play.decentraland.org/?position=-117,-35
MetaTokyoのプレスリリース: https://prtimes.jp/main/html/rd/p/000000109.000017258.html

スクリーンショット 2021-11-18 18.42.24

ディセントラランドのアバター作るの難しすぎる…
このエントリーをはてなブックマークに追加

4cd5a822-a01d-4400-a783-449ff79c5fe2

reona396 information
https://reona396.com/

よろしくです〜〜〜！！！！！
ドメイン取って念願のSSL対応しました(いまさら)
ポートフォリオや実績などをまとめてあります。
メインビジュアルは昨年9月の個展用に使ったものを再利用しました。

WordPressのBlosというテーマを利用しました。
Blos - WordPress テーマ | WordPress.org 日本語
  • カテゴリ:
    Web
  • by
このエントリーをはてなブックマークに追加

「スーパー正男」というブラウザゲームをご存知でしょうか。
面白FLASH倉庫的なムーブメントとほぼ同時(？)くらいに流行っていたブラウザゲームです。
マリO的な見た目と操作感、ステージデータをさくっと作成できるお気軽さ(マリOメーカーですね！)でかつてのインターネットを牽引する存在でした。
作者様のページはこちら。
福田直人のホームページ
細かい歴史など、詳細はこちらがわかりやすかったです。
スーパー正男とは (スーパーマサオとは) [単語記事] - ニコニコ大百科

もう平成も終わりますし、せっかくなのでJoy-Con対応させてみました。
ゲーム自体はこちらからダウンロードしました(いわゆるJSまさお、Canvas正男)。
JSまさお置き場
ゲームステージはプレーンな1番最初のステージを利用しました。なつかし〜！
まさお コンストラクション サンプルゲーム


スティック左右入力で左右移動、Xボタンでジャンプ、HOMEボタンでタイトルに戻ります。
もちろんダッシュからの大ジャンプも可能！

コード載せておきます。
ゲームのhtmlで読み込めばきっとJoy-Con対応できるはず。
やっていることはJoy-Conのボタン・スティック操作をキーボード操作に振り替えています。
まだR側Joy-Conしか対応できてないのでコードが微妙ですが…
2人プレイ可能な「正男ブラザーズ」もいつかJoy-Con対応して"おすそわけプレイ"ができるようにしたいですね :)

これで次の令和も楽しく遊べますね！

参考 :
Adding Nintendo Joycon Support to Your Website with the Gamepad API
p5.jsでPS4とSwitchのコントローラ(Joy-Con)を接続してブラウザ上で操作する : だらっと学習帳
Javascriptでキー入力イベントを発行する方法 | システムトラスト技術ブログ
このエントリーをはてなブックマークに追加

image_emoji00
emoji with p5.collide2D - OpenProcessing

このスケッチはemojiをランダムにtextとして設定しつつ、位置をかぶらないように配置しなおしています。
"位置をかぶらないように"については以下の記事に書いています。
p5.js のライブラリ p5.collide2D でぎゅむぎゅむさせる : だらっと学習帳

emojiをランダムに設定する
ときどき豆腐が出ちゃうんですが、こんな感じでランダムに設定しています。
this.emojiCode = random(10) > 7.75 ? floor(random(128512, 128592)) : floor(random(127744, 128318));

this.emoji = String.fromCodePoint(this.emojiCode);
emojiCodeをランダムな数値として設定し、その値からemojiに変換しています。

この数値はUnicodeの16進数の数字を10進数に変換したものです。
例えば😀ならUnicodeはU+1F600なので、1F600を10進数に変換して128512となります。
UnicodeのEmojiの一覧 - Wikipedia

それをjs的にemojiに変換するためには以下のように書きます。
String.fromCodePoint(128512)

スクリーンショット 2019-04-22 19.09.19

話を戻して、p5.jsスケッチ上ではこの数値をランダムに設定しているのですが、
スマイリーアイコン(黄色くてまんまるの顔で感情を示すやつ)とその他のアイコンとで出現確率を変えています。
上の画像でもわかるとおり、案外「🍣」とか「💇」とかの方が面白かったので…☺

参考 :
Emojis in Javascript
このエントリーをはてなブックマークに追加

p5.jsとPS4のコントローラ、Switchのコントローラ(Joy-Con)が接続できるか調べてみました。
ブラウザと各種ゲームコントローラがつながるので色々面白いことができそうです。
使用OSはMac(High Sierra)、使用ブラウザはChromeです。

p5.jsとPS4のコントローラを接続
あらかじめ、PS4コントローラのPSボタンとSHAREボタンを同時押しした後、Macの環境設定のBluetoothから「Wireless Controller」に接続してください。
デモページは以下です。
https://reona396.github.io/p5_gamepads_ps/
適当にボタン押したら反応すると思います。
押されたボタン名に枠が付きます。アナログスティックの動きは上部に反映させています。
接続方法は以下を参考にしました。
MacにPS4コントローラを接続して利用する方法 | Gerolian



コードはこちらのリポジトリに置いてます。
reona396/p5_gamepads_ps
スケッチのファイルだけ抜き出したものが以下です。

以下の記事のコードを参考にp5.jsに組み込みました。
Gamepad(Web API) 適当にテスト - Qiita
ボタンとアナログスティック(コード中はaxes)について、それぞれ別に管理しています。
ボタンに割り振られている番号が素直に並んでて良い感じです。

p5.jsとSwitchのコントローラ(Joy-Con)を接続
あらかじめ、両方のJoy-Conをモニターから外し、外した断面(？)のSR・SLボタンの間にある小さいまるいボタンを押してください。
ランプが光ったら、PS4と同じくMacの環境設定のBluetoothから「Joy-Con(L)」「Joy-Con(R)」に接続してください。
デモページは以下です。
https://reona396.github.io/p5_gamepads_sw/
ボタンが押されたら横の円に色がつきます。
デザインは以下の記事を参考にさせていただきました。
【P5 Tips】 ProcessingをNintendo SwitchのJoy-Conで遠隔操作する｜タピオカ@ジェネラティブアート｜note
スティック入力についてはもうだいぶ力尽きて適当な表示になってしまいましたが、
左黒丸がLスティック、右黒丸がRスティックの動きとしてニュートラル位置+8方向を反映します。



コードはこちらのリポジトリに置いてます。
reona396/p5_gamepads_sw
スケッチのファイルだけ抜き出したものが以下です。

以下の記事のコードを参考にp5.jsに組み込みました。
Adding Nintendo Joycon Support to Your Website with the Gamepad API
そもそもコントローラが2つもあったり、ボタンに割り振られた番号が素直な並びじゃなかったり、
スティックの方向も素直な向きじゃないので無理やり補正したり…とかなり苦労しました。実装も力ずくです。

まとめ
p5.jsと各種コントローラは接続できると確認できたので、ゲーム制作など色々と幅が広がりそうです。
ブラウザを飛び出して物理コントローラとつながるというのはロマンですよね〜
このエントリーをはてなブックマークに追加

↑このページのトップヘ