タグ

CreateJSに関するtonkotsuboy_comのブックマーク (5)

  • CreateJS で三角関数を活用しよう - ICS MEDIA

    ここでは三角関数を使った様々な計算の手法を学んでいきましょう。三角関数はあらゆる実装の基となるため、この解説をおさえて応用のための基礎知識をつけておきましょう。 マウスの方向を向かせる 画面上の矢印を、常にマウスを向くように実装してみましょう。 サンプルを再生する サンプルのソースコードを確認する これ実現している主なコードは次の部分です。tickイベントの処理でマウスの方向を向くようにrotationプロパティーを変化させています。 // 時間経過 createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { // マウス座標との差分を計算 var dx = stage.mouseX - arrow.x; var dy = stage.mouseY - arrow.y; // 差分を元に方向を

    CreateJS で三角関数を活用しよう - ICS MEDIA
  • 意地でもCreateJSでWebGLを使ってみよう―CreateJS勉強会/川勝発表資料 - ICS MEDIA

    CreateJS勉強会 (第6回)でのライトニングトーク「意地でもCreateJSでWebGLを使ってみよう」(発表者:川勝)の発表内容を記事としてまとめました。CreateJSのWebGL機能は高いパフォーマンスが得られるものの、表現の制約があります。記事ではCreateJSのWebGL機能を拡張することで、その制約を超えて望みの表現を実現する方法を紹介します。 CreateJSではWebGLレンダリングに対応 CreateJSの中で、描画機能を提供しているEaselJSはWebGLでのレンダリングに対応しています。WebGLではレンダリングにGPUを使用できるため、高速に描画が可能です。CreateJSではWebGLを使用すると、従来のContext2D形式に比べて環境によっては最大51倍もの高速化が見込めます(参照「WebGL Support in EaselJS - Create

    意地でもCreateJSでWebGLを使ってみよう―CreateJS勉強会/川勝発表資料 - ICS MEDIA
  • 第6回 CreateJS勉強会に行ってきた • 448.jp blog

    先々週の金曜日、第6回 CreateJS勉強会に行ってきました。もともと一般の参加者として登録していたのですが、定員40名のところに参加希望者が80名以上と、もったいないオバケもびっくりな状況になっていたので、主催の野中さんと調整し、私もオフィスとして入居しているコワーキングスペースICTCOでの開催に協力することになりました。 LT会の始めにLT3連発として、ICSの鹿野さん、蔵下さん、川勝さんの発表がありました。それぞれ、CreateJSを触りはじめてちょっと経つと沸いてくる疑問や問題に応えるような内容になっており、とても有意義なものでした。 個人的に、mp3で完全にスムーズな音声ループをさせる方法(mp3はどうしてもループ時にギャップができてしまう)を知りたかったのですが、CreateJS側ではそれを回避する手段はなさそうでした。今のところ、BGMをループさせるタイミングで一度無音の

    第6回 CreateJS勉強会に行ってきた • 448.jp blog
  • HTML5の音声ファイル最適化技術オーディオスプライトとは?―CreateJS勉強会/鹿野発表資料 – ICS LAB

    2015年に開催したCreateJS勉強会(第6回)でのライトニングトーク「オーディオスプライトを使った音声ファイルの最適化」の発表内容を記事としてまとめました。音声を扱ったHTML5コンテンツにおけるCreateJSの最新機能「オーディオスプライト」の必要性と使い方を記事で紹介します。 ウェブページではファイルの読み込み数を減らすことが必要 ウェブページを見る時や作る時、そのページでどのくらいのファイルがダウンロードされているかを気にしていますか? CSSJavaScript・画像・音声ファイル等、ウェブページでは必要なファイルが多くなりがちです。ファイル数が多いとファイルをダウンロードする時間が増え、その分だけページの表示速度が遅くなります。ページの表示速度が遅くなると、その分だけユーザーの離脱率が上がります。 Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンす

    HTML5の音声ファイル最適化技術オーディオスプライトとは?―CreateJS勉強会/鹿野発表資料 – ICS LAB
  • 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

    CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
    tonkotsuboy_com
    tonkotsuboy_com 2015/02/18
    先日のCreateJS勉強会で発表した記事をブログとして公開しました。よろしければ御覧ください。
  • 1