CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
enchant.jsのフレーム管理周りを改造した話 - Kengo's blog
この土日は体調回復しつつ国産ゲームエンジンenchant.jsのコードを読んでいました。先日9leapで公開したTowerDefenceゲームを低速端末でもスムーズに動作させたかったのです。 その成果はなんとかforkとして結実しました。ここにはなにをやったか、既存実装にはどのような課題があったのかをまとめておきます。 FPSってなによ？ Frames per second、すなわち1秒あたり何度処理するかを表す数値。enchant.jsではプログラマが期待する処理頻度をGame.fpsプロパティで設定可能であり、この数値がenterframe/exitframeイベントの発火頻度を決定づけています。 大きければ大きいほどほどぬるぬるした描写が可能になりますが、大きすぎるとリフレッシュレートや人間の認知能力を超え、無駄な処理になります。enchant.jsのデフォルトFPSは30であり、拙
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
サーバサイドでCanvasを利用する(node.js)
// sample.js var Canvas = require('canvas') , http = require('http'); http.createServer(function (req, res) { var canvas = new Canvas(200,200); var ctx = canvas.getContext('2d'); // 四角形描画 ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; ctx.fillRect(10, 10, 190, 190); // テキスト描画 var text = "Canvas Test"; ctx.font = '30px Impact'; ctx.rotate(.1); ctx.fillStyle = 'rgba(0, 0, 0, 1.0)'; ctx.fillText(text, 10, 1
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
Canvas/WebSocketなネトゲの、ざっくりとしたロジック解説 - mizchi log
Canvas/WebSocketでディアブロクローンなネトゲを作ってみた - mizchi logの解説 ちゃんと勉強して実装したわけじゃないけど、つくってみたい！と思った人が一通り実装できる程度の解説をする。 ゲームプログラミングとウェブプログラミングの初歩を知ってるとなお良い。(というか僕自身どっちも微妙なのだが) ソースコードはこちら GitHub - mizchi-sandbox/ws-netgame: WebSocketを用いたネットゲーム 前提として、CoffeeScript、WebSocketを使う なお、以下のコードは概念を説明するために簡略化したもので、socket.io , coffeescriptの微妙な挙動については検証していない。あくまで擬似コードの一種として読むように。 MVCにわけて解説する。 Model サーバーのセーブデータ。基本的にログイン中はオンメモリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Using Canvas to Change Photo Colors (Windows)
IBM Developer