プログラミング | SHERPA TIMES

Category
Agora.ioを使用した完全なビデオ通話アプリケーションの実装チュートリアル
こんにちは、チャリセです!最近Agora.ioを使ってメタバース空間にビデオ通話の実装作業をしています。今回は、Agora.ioを使用して、ウェブブラウザ上で動作する完全なビデオ通話アプリケーションを作成する方法を説明します。このアプリケーションには、基本的なビデオ通話機能に加えて、音声とビデオのミュート機能も含まれて...
JavaScriptの便利なメソッド、 例と説明
こんにちは、チャリセです!今日は、日々のコーディングを格段に効率化してくれるJavaScriptの便利なメソッドについてご紹介します。これらのメソッドを使いこなせば、よりクリーンで読みやすいコードが書けるようになりますよ。それでは、さっそく見ていきましょう!1. Array.prototype.map()map()メソ...
【PlayCanvas】JavaScriptで効率よく処理しよう!
福田です!今回はPlayCanvasでEntityの制御をするうえで大事なJavaScriptの知識をいくつか紹介します!知っているだけで簡単になるかもしれない処理はたくさんあるので、積極的に学んでいきましょう! アロー関数(Arrow Function) アロー関数は、ES6で導入された新しい関数の記法です。従来の関...
ビデオチャットのボーダーアニメーション:シンプルな実装ガイド
こんにちは、チャリセです!今回は、Zoomのようなビデオチャットアプリケーションでよく見られる面白い機能を実装する方法をご紹介します。それは、話者の音量に応じてビデオの周りのボーダーの色が変化するアニメーション効果です。まずは、機能の概要を説明します。この機能は以下の要素で構成されています。1. ビデオ表示領域(今回は...
【PlayCanvas】複数のUVを使ってみよう!!
福田です!今回はサイズ圧縮とクオリティアップの両方で役に立つ複数のUVを使った設定について解説していきます!UVが一つだけだとベイクするとき、クオリティを高めようとするとテクスチャサイズが馬鹿になりませんし、逆にサイズを小さく収めようとするとクオリティがどうしても落ちてしまいます。そんな時に複数のUVを使うとなかなかい...
【PlayCanvas】複数のカメラを使ってレイヤーを作る方法
福田です!今回は複数カメラを使って、画面に表示する方法をやっていこうと思います!これの便利なところは、メインカメラとは違う視点にあるものを常に画面内に表示できるところです!これをうまく使えば、3DUIをサクッと作れたり、監視カメラやミニマップを表示することだって可能になります!ではやっていきましょう! 手順 今回は、プ...
PlayCanvasで動的に画像をフェッチしてレンダリングする方法
こんにちは、チャリセです!今回は、PlayCanvasを使って動的に画像をフェッチし、3Dオブジェクトにレンダリングする方法について詳しく解説していきます。この技術は、ゲーム内のテクスチャを動的に更新したり、ユーザー生成コンテンツを表示したりする際に非常に有用です。 コードの概要今回紹介するコードは、「FetchIma...
【PlayCanvas】html,CSSを使ってUIを表示してみよう!【Web】
福田です!今回は、html,cssを用いてPlayCanvas上にUIを追加する方法について解説していきます!今回は、ボタンを生成し、そのボタンを押すことでBoxのカラーが変わるようなものに挑戦しましょう!ではよろしくお願いします! 必要ファイルの準備 ボタンを生成するのに必要なのは、html,css,jsの3つのスク...
【PlayCanvas】オブジェクトを移動させよう!【RigidBody】
福田です!今回はRigidBodyを使ったオブジェクト移動について書いていきます! 1.RigidBodyコンポーネントの概要 RigidBodyは、物理シミュレーションにおいてオブジェクトの動きを制御するためのコンポーネントです。これにより、重力や衝突などの物理現象をシミュレートすることができます!今回はプロジェクト...