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
HTML5のCanvasを使いやすくするライブラリまとめ
Posted: 2013.12.20 / Category: HTML&CSS, javascript / Tag: HTML5 HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。 CREATEJS CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。 Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。 sample code var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild
とても効率的になった！HTML5に関する「役立つ」まとめ
作成：2013/12/16 更新：2014/11/01 Web制作 > サイト構築をするときに、フォームまわりの改善や動画やAPIを使わなくてはいけない機会があったので、ついでにHTML５のマークアップをおさらいをしました。今回はサイトを構築する上で覚えておくと役に立つ、使用頻度の高いポイントだけおさえてまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ HTML5 タグ一覧 １．フォーム（input ）関連の便利な新要素 ２．基本要素一覧 動画／音楽再生 ３．video タグ ４．audio タグ アプリケーション向けの機能／API ５．位置情報を取得する ６．ローカルストレージ ７．サーバー双方向通信 ８．バックグラウンド処理 ９．ファイル操作 サンプル １０．ソースコードつきのサンプル テンプレート １１．テンプレート＋作成ツール HTML5
まるで自分の意思があるかのよう！canvasサイトまとめ12選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。たまです。 最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。 今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。 インスピレーションが湧いてくるな〜。では行ってみよう！ My Life in 20 Years https://www.mylifein20years.com/ ※現在はサービスを終了しています。 facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic https://panasonic.jp/shaver/lamdash/dna/index.html DNAがcanvasによって表現され、3Dの
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
HTML5でコーディングするときに役立つ10のオンラインツール
最近ではすっかりおなじみになりつつあるHTML5。ブラウザの問題もあり、まだ広くは利用されていませんが、徐々にその範囲を拡大しつつあります。今日紹介するのはHTML5でコーディングするときに役立つ10のオンラインツールをまとめたエントリー「10 online tools to simplify HTML5 coding」です。 Initializr 様々なHTML5コーディングに役立つWEBサービス、チートシートなどが集められていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 HTML5 Demos and Examples HTML5の独自機能のDemoを試せるサイトIE、firefox、opera、safari、Chromeとそれぞれのブラウザの対応状況をチェックできます。 HTML5 Canvas Cheat Sheet – Nih
HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) | DevelopersIO
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きます。 m(_ _)m Transforms 3D - 事始め 端的に言うならば、Transform 3D は要素を3次元に移動ならびに回転、拡大縮小できるというものです。更に後述するperspectiveを使うことで、要素に奥行きのある表現を持たせることが可能となります。 3DではX軸とY軸に加えて、Z軸が追加されます。Z軸はウィンドウからユーザーに向かう方向が正の値で、ユーザーからウィンドウに向
HTML5の最先端技術で顔文字はこんなにおもしろくなる
HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/ 「顔文字」と「ASCII Art」はほとんど毎日使っていますが、 コードで表現するとどうなるのか考えたことはありますか？ jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。 今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。 顔文字とASCII ArtがHTML5最先端の技術との融合は、 果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。 ((o(´∀｀)o))ﾜｸﾜｸ では、さっそく投稿したコードをいくつか見ていきましょう！ HTML5で表情豊かに表現する「顔文字(・∀・)」 Gravity Face ※「▶Play」ボタンをクリック！
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
AdobeがHTML5とCSS3で出来るスゴ技を紹介「The Expressive Web」:DDN JAPAN
DDN は 音楽 ・ 映像 に関する デジタル アート を中心に情報ミックスを配信中
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
画像不要！HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します！ 現在CanvasはFirefox/Chrome/Safari/Operaなど殆どのブラウザの最新版で実装されています。 ■DEMOを表示 Javascript <script> $(window).load(function() { $('#gallery img').each(function() { createCanvas(this); }); function createCanvas(image) { var canvas = document.createElement('canvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // キャンバスサイズを指
HTML5を使った海外のオシャレなかっこいいサイト10選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。あかねです。 秋を感じる間もなく、あっという間に冬ですね。 会社での防寒対策を考えないと。。。 さて、今回はHTML5の海外のかっこいいサイトを紹介します！ どのサイトもイラストや写真、挙動に凝っているのでweb制作の参考になります。 The Claw Bar http://www.theclawbar.com/ estival Mundo 2011 – Aterrizando no Espaço Cultural http://2011.festivalmundo.com.br/ Gentle Media – Web Design & Web Development http://www.gentlemedia.nl/en/ MyDirtyDesk http://www.mydirtydesk.com/ Soleil Noir 2012 | We believe in… ht
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、ボードゲーム『カタン』のWeb版“Catan Anytime”を無償公開
IDEA * IDEA
これはスゴイ！HTML5でリメイクされたスーパーマリオブラザース
IDEA * IDEA
HTML5KARUTA - 「HTML5カルタ」で覚える！HTML5の108つのタグ
