これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
投稿日:2017年4月1日 | 最終更新日:2017年5月3日 Unity5.6が本日（日本時間4/1。北米時間の3/31）にリリースされました。 ですが、Unity5.6はβ段階で判明しているバグが未修正のままリリースされてしまっています。 詳しくは、リリースノートのKnown Issues（既知の問題）を確認してもらえればと思います。 未修正の問題があったままリリースされること自体は珍しくないのですが、Unity5.6ではわりと地雷なバグがあるので、情報共有としてここでまとめておこうかと思います。 TransformからRectTransformへの自動変換の際に、そのオブジェクトのヒエラルキーの全オブジェクトにOnDisable→OnEnableが呼ばれる これはすでに、UnityのIssuTrackerでも報告されています。 また、リリースノートの「Known Issues」にも以
2Dのちょっとした演出に幾つか役に立ちそうなアセットをまとめておく 2DxFX これは2Dのスプライトにいろんなエフェクトを追加できます。 いろんな種類があって面白い。 使い方は沢山あるscriptの好きなやつをspriteにアタッチするだけ。あとはパラメータをいじるだけです NextGenSprites こちらは高機能。 水の中のような揺らめきやディゾルブっていうのかな・・・徐々に消えるみたいなことができます エミッションもちょっと複雑なことができ、アニメーションさせられます 使い方はspriteを選択した状態でwindow->NextGenSprites->WIdgetからのウィンドウをぽちぽちっと ライトの影響を受けるかみたいな設定もボタン一つ あとは設定したい項目をenableにして画像とかパラメータを設定するだけ Curved UI - VR Ready Solution To
Live2DのWebGL版で複数のCanvas表示が可能になっています。 SDKサンプルコードのSimpleプロジェクトをクラス拡張すると、複数表示可能です。 複数CanvasにLive2Dモデルを表示する １）まずはLive2Dモデルファイルをassets配下に置きます ２）HTML側のCanvasを複数にします <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Simple</title> </meta> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0"> </meta> </head> <body onload="Simple()"> <
今回はuGUIのImageとSprite Rendererの使い分けについてメモします。 ImageとSprite Renderer Sprite Rendererの振る舞い uGUI Imageの振る舞い 最適化に関するアプローチの違い SetPassの削減に関する振る舞いの比較 フィルレート・オーバードロー削減に関する振る舞いの比較 大量に描画した時と動かした時の振る舞いの比較 つまり、どのように使い分けるべきか Tips 関連 ImageとSprite Renderer Unityで2Dの絵を簡単に出す方法として思いつくのが、Sprite Rendererのような2D機能を使用する方法と、uGUIのImage系の機能を使用する方法です。 どちらも「テクスチャを表示する」という振る舞いなので、画面に表示したようなケースでは、全く見分けが付きません。 では、どちらを使っても良いのかと言わ
イメージの拡大縮小を行うプログラムを作成する。 [通常版実行] [iPhone版実行] リソースの準備 以下の画像をHTMLと同じフォルダに配置。 sorami.gif 114x114 ソースコードの記述 ScaleEx.js var canvas;//キャンバス var g; //グラフィックスコンテキスト var scale; //回転角度 var image; //イメージ //初期化 function onLoad() { //変数 scale=0; //グラフィックスコンテキストの取得 canvas=document.getElementById("imgCanvas"); g=canvas.getContext("2d"); //イメージの読み込み image=new Image(114,114); image.src="sorami.gif"; //タイマーの
TOPICS Game , HTML/CSS 発行年月日 2012年09月 ISBN 978-4-87311-560-3 原書 Introducing HTML5 Game Development FORMAT JavaScriptで動作するフレームワークImpactを使った、HTML5ゲームの開発について紹介する書籍です。 Impactを使った2Dゲームの制作を題材に、フレームワークのセットアップ、ゲームのアイデア、キャラクターの作成、マップの作成、移動、攻撃、衝突検知といった、ゲームに必要な各要素について解説しています。また、作成したゲームをプレイヤーがより楽しめるような仕組み作りやデバッグといったトピックについても触れています。なお本書はEbookのみの販売となります。 はじめに 本書について 本書の対象読者 本書の対象でない読者 本書で使用されている表記規則 サンプルファイルについ
久しぶりの投稿です。 今回はuGUIのオブジェクトの大きさを動的に変える方法を手さぐりで見つけたので記録しておきます。 今の今まで私はUnityでGUIを使いたい場合はOnGUI()を多用していましたが、さすがにそろそろuGUIで実装できるようになろうと思っている今日この頃。 なぜすぐにuGUIに切り替えなかったかというと、uGUIのCanvas下に置いたオブジェクトの大きさを動的に画面サイズにする方法がわからなかったからです。 でも今回時間があったのでいろいろ試していたら正解にたどりついたので、以下にサンプルコードを書いておきます。 サンプルはC#コード上で、RawImageオブジェクトを受け取ってそのコンポーネント(?)にアクセスしてサイズを動的に変換できるソースになっています。 using UnityEngine; using UnityEngine.UI; using System
Javascriptで3Dレンダリング Zソート、Zバッファを用いた3Dレンダリングです。 canvasやSilverLightでピクセル単位の描画に挑戦！！ ･･･が、思ったほどの速度は出ませんでした(涙 ちなみに、満足できる画質で Working FPSが25前後でないと負け組、 Drawing FPSが25以上でれば勝ち組です（笑 2009/11/27追記 Zソートを追加 まあまあの速度が出ました。 canvasやSliverLightでポリゴンを描いているので、自動でアンチエイリアスをかけてくれて、 Zバッファよりきれいな絵が描けてます。 2009/12/06追記 ものを変えて、フォグを付けてみました。 だいぶ3Dっぽくなったと思います。 もはやそれなりの高スペックPCでもSafariかGoogle Chromeでしかまともに動かないですが(^^; Renderer レンダリン
HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ
できたよー！ 遊び方 次のURLから、twitterアカウントでログインする。 http://w-mtlab.com:4444/ 対応(確認)ブラウザはGoogleChrome Firefox4.0以上。 同時に10人ログイン程度まではテスト済。それより増えるとわからん。 矢印キー or WASD 移動 数字キーでスキル設定 1 攻撃 2 強攻撃 3 回復 4 範囲攻撃 青が自分、赤が敵、緑は他のプレイヤー それぞれにクールタイムが設定してあって、一定時間立つと実行する。具体的には、スキルを選択して敵に近づけば、それを定期実行する。ディアブロ式のネトゲやったことある人なら直感的にわかると思う。 敵を一定数倒すとレベルが上がる。ゲーム的な部分は、あまり詰めてない。クライアントではまだ可視化してないイベントがたくさんある。 死んだらリロードで復活する。 セーブデータはアカウント単位で保存されて
参考出品されるのは、DTM音源として一世を風靡したSOUND CanvasのVST／AUバージョン、その名も「SOUND Canvas VA」。「SOUND Canvas for iOS」の発表から約1年の月日を経て、SOUND Canvasが遂にDAWソフトウェア上で使用できるようになります。 ローランドによれば、iPhone／iPad版の「SOUND Canvas for iOS」が思いのほか好評で、ユーザーからは“ぜひプラグイン・バージョンも”というリクエストが多数寄せられたとのこと。それだったらと開発に着手したのが約半年前とのことで、音源のコアとなる部分は「SOUND Canvas for iOS」とほぼ同一とのことです。 音源としては「SOUND Canvas for iOS」のVST／AUバージョンと考えてよさそうで、1,600種類の音色と63組のドラム・セットを収録。リバーブ
Canvasタグでオセロ盤表示 JSとCanvasタグを利用してオセロ盤の表示を行います。 最近はJSでゲームを作る場合enchant.jsやtmlib.jsなどといったフレームワークが 充実しているようだが基礎を大切にしたいのでまずは素のJSで作ってみようと思う。 ○作成に当たって jsでの開発用環境としてBracketsを利用することにした。まだあまり 使い慣れていないが補間の能力がすごく優れていた。それからライブプレビューで編集結果の リアルタイム反映でデザイン調整には便利な機能に力を入れている。 またNode.jsが標準で同梱されているなど、jsでの開発を行う人にはとってもお勧めできそうな気がする。 ○まずは、canvasタグ オセロ盤の表示にはhtml5のCanvasタグを使う。Html5を使う場合ブラウザにもそのことを明示 的に伝えることが推奨であるので、気にするのであればドキ
「p5.js」というJavaScriptライブラリが最近気になっていたので、勉強も兼ねてちょっと遊んでみました。 そもそも「canvas」を利用した描画処理を簡単にプログラミングできるのが「p5.js」の特徴ですが、機能を拡張するライブラリがとても優秀で、ゲーム、音楽、Webアプリ、IoT…など、幅広いジャンルの開発ができるところに魅力を感じています。 そこで今回は、ゲーム用の拡張ライブリ「p5.play」を使って、シンプルな「ブロック崩し」を作ってみたいと思います！ 用意するもの！ ゲームを作るのに必要なファイルは、「HTMLファイル」と「JavaScriptファイル」です。 HTMLファイルは、単純に「p5.js」関連のファイルを読み込んで、今回作る「ブロック崩し」のゲームファイル「app.js」を明記するだけでOK。 <!-- index.html --> <!doctype htm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![Sound Canvas for iOS徹底活用術[応用編] ～ 外部音源としてコントロール、レコポ・クローンも!?](https://cdn-ak-scissors.b.st-hatena.com/image/square/3cc561767399e87cbd3a76d74bfe4721602fd69e/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fwww.dtmstation.com%2Fwp-content%2Fuploads%2F2015%2F02%2F16198700067_06a339a779.jpg)
