GitHub - kobalab/Majiang: HTML5 + JavaScript で動作する麻雀アプリ「電脳麻将」You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Block Pong: Web 技術を駆使したゲームアプリの実装舞台裏 - DevFest 2020
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
"HTML5ゲーム重い問題"をいかに解決するか？ CPU負荷を改善する方法 | ログミーBusiness
2019年10月9日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第27回となる今回のテーマは「HTML5で『重い』問題をクリアしてリッチなゲームを作る」。株式会社ノックノート執行役員の岡山知弘氏が、話題のHTML5ゲームを作るにあたって、いかにJavaScriptでリッチなゲームを作りながら重い問題を解決していくかを語りました。前半パートとなる今回は、負荷改善における前提とCPUの問題についてレクチャーしました。 HTML5で「重い」問題岡山知弘氏：それでは、30分ほどお時間をみなさんにいただいて、HTML5で重たい問題は、みなさんがHTML5を触られている方であれば、まさに直面しているかなとは思うんですけど、そこで弊社でどういうふうにアプローチしたのかをお伝えさせていただけ
ゲーム開発初心者が教えるブラウザゲームのつくり方（前編）
この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「前編」です。 発表スライド（SpeakerDeck） 前編: この記事 後編: ゲーム開発初心者が教えるブラウザゲームのつくり方 ※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。 ※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります ゲーム開発初心者が教えるブラウザゲームのつくり方 まずは、自己紹介からさせていただきます。 2015年末にSIerからフロントエンドエンジニアにジョブチェンジして、さくらインターネットに入社しました。 いまは、さくらのクラウドのネタ機能開発や、自社サービスのエゴサを主な業務としています。ですので、みなさんがツイートされた
JavaScriptで大量のオブジェクトの当たり判定を効率的にとる - Subterranean Flower Blog
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
ReactとPHPでリアルタイムなシミュレーションゲームを作ってみた
複数人でプレイできて、経営シミュレーションの仕組みを取り入れたゲームを作りたい。Stardew Valleyから交流機能を省いた、経営活動ができるゲームだ。 こう考えた私は、PHPとReactJSでゲームを開発することにしました。 しかし問題は、複数人でプレイするゲームの構成や、プレイヤーと経営の仕組みを実装する方法について何も知らなかったことです。 自分自身にReactJSを使うだけの知識があるのかすら分かりませんでした。初期のバージョンではサーバーの処理と経営の仕組みを実装することに重きを置いているので、インターフェイスの構築にはReactJSが適しています。経営の仕組みとして考えている農業とのインタラクションについては自信がありませんが、経営システムを単一のインターフェイスで構築するのは魅力的なアイデアです。 私がJavaScriptによるゲーム開発に関する本を執筆したきっかけは、d
今一番JSで熱いゲームエンジン、RPGツクールMVのランタイムコードを読んでみた - Qiita
一昔前にCanvasが実用段階になった頃、JSのゲームエンジンが大量に出てきたことがありました。それらは大抵DOM/CanvasのFallbackを持っていたのですが、今現在の状況は、実際には非効率なメモリ消費やモバイルのブラウザのフラグメント化で実用に足るものがなかった、という辛い現状があります。 そんな中pixi.jsという描画ライブラリが台頭してきました。このエンジンは webglとcanvasの fallbackを持ち、(いくらかのバグはありつつも)DOMを切ったことで現実的なパフォーマンスの課題をクリアできるのでは？という期待感が高まっています。 Pixi.js - 2D webGL renderer with canvas fallback http://www.pixijs.com/ そして 2015年、RPGツクールMVが発表され、ブラウザ吐き出し対応がアナウンスされました
ブラウザゲームのプロトタイピングに役立つJavaScriptライブラリ - ABAの日誌
ブラウザで動くゲームのプロトタイプを作るとき、もちろんPhaserとかの機能満載のゲームエンジンを使ってもいいのだが、こういったエンジンは多彩な機能に応じてAPIが豊富すぎて、使いこなせるようになるまでが若干面倒なことがある。そういった時、もっと軽量のJavaScriptライブラリを機能ごとに組み合わせた方がお手軽に作れるのではないか。そう思って、ゲームで使う機能ごとのライブラリを探してみた。 グラフィックス p5.jsが役立ちそう。p5.jsはビジュアルデザイン向けとして有名な言語ProcessingをJavaScript向けライブラリとして提供したもの。似たものとしてProcessing.jsもあるが、こちらは元のProcessing言語をブラウザ上で動かすことに主眼を置いており、ライブラリとして使う分にはp5.jsの方が使いやすい。 Get Started見れば分かるように、crea
javascript再勉強のためにreact + ardaでマインスイーパーをつくったので気づきを忘れないようにメモ - Qiita
一ヶ月近くの有給休暇を経て8/1から完全な無職になりました。前職ではjsといえばviewsに$()を書きまくるという所業をはたらいておりましたが、railsはapi、フロントは別口でというのが流れであるっぽいので、ちゃんとしたjs作業をしましょうというのが今月のあらすじ。 成果物 うごいてるもの No Mines Land 左右同時押しがMouseEventから簡単にとれてびっくりした。 ソース https://github.com/mmmpa/mine はじめてつかった Browserify とくにBrowserifyはとてもよくて、javascriptのファイル分割に関する知見がまったくない自分でも、簡単に分割と結合が行えるようになっており本当によかった。 Browserifyについて勘違いしていたこと Browserifyを読み込んでおくとrequireが使えるようになると思っていた
JavaScriptでフルスクラッチゲーム開発しよう 第1回 準備編 - Qiita
HTML5のゲーム開発向けフレームワークの乱立 昨今、HTML5のCanvas, WebGL, WebAudioAPiなど、Webフロントエンド技術でのゲーム開発に向いた技術が増えて、Webブラウザ向けのゲーム開発界隈が盛り上がりを見せています。 それに合わせて、JavaScriptによるゲーム開発向けフレームワークも広がりを見せ、どれを選べばいいか迷ってしまうほど、多くのフレームワークが登場しています。 習熟の道 しかし、HTML5ゲームの開発をする際にそういったフレームワークを使用することを選択した場合、CanvasやWebGLなどの特性を学ぶ他、そのフレームワークの使用方法や設計理念も学ぶ必要があり、目の前に登場する大きな要塞に立ちくらみを覚える人も居るかと思います。 「フロー体験」という考え方があり、技術の習熟においては、自分の現在の習熟レベルに合わせて技術を学習する必要があります
牌山生成について | セガネットワーク対戦麻雀 MJ5
【１】「プレイヤー乱数シード」と「不確定要素」から、「乱数の種」を生成する。 ・「全員のプレイヤー乱数シード」を数値に変換し、小さい順に連結して640bitの値にする。 ※三人打ちでは480bitの値 ・640bitの値を不確定要素によって変化させ、乱数の種とする。（不確定要素は、毎局変化する値） 【２】「乱数の種」を使って、「牌山」を作る。 ・起家を起点に、「萬子」、「索子」、「筒子」、「字牌」の順に牌を並べ、仮の牌山を作る。 ・仮の牌山を、「乱数の種」によって生成した「乱数」を使ってシャッフルする。 【３】「乱数の種」を使って、「サイコロの目」を決める。 // 座席位置 var Direction = 2; // 牌山の計算 function calcYama(Pseed1,Pseed2,Pseed3,Pseed4,UEseed){ // 各プレイヤーシード(文字列)を16
FINAL FANTASY Record Keeper の作り方
ゲームの仕様書を初めて作成する人のための足掛かりのスライド ▼以下のスライドを一つにまとめました ・ゲームの仕様書を書こう１ 仕様書作成の分業とリストの作成 https://www.slideshare.net/ChizuruSugimoto/ss-173331109 ・ゲームの仕様書を書こう２ 仕様書に記載する機能内容 https://www.slideshare.net/ChizuruSugimoto/ss-173332578 ・ゲームの仕様書を書こう３ 仕様書に記載するデータと画面 https://www.slideshare.net/ChizuruSugimoto/ss-173333150 ・ゲームの仕様書を書こう４ 仕様書作成で楽をするconfluenceの活用 https://www.slideshare.net/ChizuruSugimoto/confluence-17333
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編） 西田慎吾（株式会社アイ・エム・ジェイ） 今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。 このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。 また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。 クライアントサイドの使用技術 クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計 クライアン
HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - syonx
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング - あのねノート。
2013-08-24 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング やり方 はじめに この前enchant.jsでぷよぷよ by おっ立ち野郎を作って公開しました。 enchant.jsで作ったHTML5+JavaScriptな「ぷよぷよ」を公開しました これを知り合いR君に紹介したところ、嬉しい事に「僕もぷよぷよ作りたい！」といってもらえました。それでぷよぷよの解説サイトをネットで見つけて紹介しようと思いました。 しかし、テトリスの解説サイトは山ほどあるのに、ぷよぷよプログラミングの解説サイトが全然ありませんでした。特に完成まで解説しているサイトは見つけられませんでした。テトリスはあるのに。 ということで、今回ぷよぷよプログラミングの完成までの解説を書いてみました。これはenchant.jsの基礎をひと通り勉強された方におすすめです。クマをちょこちょこ動かすだけ
Herlock - JavaScript クロスプラットフォームゲームエンジン
動画を見る 動画を見る HerlockはJavaScriptを使用してワンソースでAndroid、iOSのネイティブアプリを開発することができる国内初のネイティブアプリ向けクロスプラットフォーム開発環境です。 手軽にパフォーマンスの高いネイティブアプリ・ゲームの開発が可能です。 Herlockクローズドベータ版（無料）は2013年8月初旬リリース予定です。 メールアドレスをご登録いただいた方はリリース情報をメールにてお送り致します。 弊社はお客様の個人情報をお預かりすることになりますが、そのお預かりした個人情報の取扱について、下記のように定め、保護に努めております。 【利用目的】 1）当サービスに関するお知らせ、ご案内のため 2）アンケート調査、モニター募集のため 3）サービス実施のため 【第三者への提供】 弊社は法律で定められている場合を除いて、お客様の個人情報を当該本人の同意を得ず
JavaScript でオセロを実装する(AI高速化編) | Webシステム開発／教育ソリューションのタイムインターメディア
これまでのあらすじ まともなオセロの対戦AIの作成を開始したものの、 「4手先を読む」だけでも検討にかかる時間が長く、 とても快適に遊べるとは言えない状態でした。 これでは肝心のAIの形勢判断を調整する以前の問題であり、 先読みする手数を増やしてAIの「腕前」を上げることも困難です。 先読みする手数を減らせば快適に遊べるようにはなりますが、 それでは「目先のことしか考えない」弱いAIにしかなりません。 どうにかしてAIの動作速度を改善できないものでしょうか。 ボトルネックはどこにあるのか これまでのオセロの作成過程を振り返ってみましょう。 最初に4×4の最小盤面で一人二役で遊ぶものを実装しました。 これはほとんどの部分が関数型で書かれた明瞭簡潔な実装だったのですが、 その引き換えに全局面を事前に計算するという超富豪的な実装になっていました。 この問題に対しては各局面の計算を遅延評価すること
tmlib.js ゲームプログラミングチュートリアル – 今流行のフラットデザインを使ったタッチゲームを作ろう | TM Life
先日, @omatoro さんが『私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由』というエントリーを 公開されました. これがすごい反響だったらしく, 私の方にも様々な意見や質問がきました. おかげで tmlib.js の知名度が一気に上がり実際に触ってくれてる人も増えました. 本当にありがとうございます. ただ, ここで一つ問題が… tmlib.js には公式のチュートリアルというものがないのです!! せっかく触ろうとしてくれてる人がいるのに, それを学ぶための公式資料がない… 本当に申し訳ない. 怠惰な自分に反省!! ってことで今回は Step by Step で tmlib.js を学びながらゲームを作ることができる チュートリアルを書いてみました. よかったら参考にしてくださいな♪ 最近何かと話題のフラットデザインを取り入れています. すいません, まだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plus.appgiga.jp/masatolan/2014/09/03/53549/
DeNA Engineering - DeNAエンジニアのポータルサイト
