スマートフォンのブラウザでのアニメーションに関するツールのメモ

mobile css

生成するhtmlコードに関する部分が中心。まだ修正・追記をする予定。Adobe Edgeを追加予定。 [2011/12/31 コメントで指摘をいただいたExGameの間違いを修正] Swiffy v3.6 Flash(swf)をhtml5を使ったコンテンツに変換できるGoogleのwebサービス。ActionScrip…

2011-09-18

css3で表示中のサイトのDOM構造を3Dにして回転させるブックマークレット

css

ChromeとSafariの最新版で動きます。自動で回転 javascript:(function(){var%20url='http://ndruger.lolipop.jp/hatena/20110919/css_3d_bookmarklet.js';var%20e=document.createElement('script');e.charset='UTF-8';e.src=url;document.getElementsByTag…

2011-07-04

iPhoneのブラウザ上で30FPS以上でヌルヌル動く3Dゲームを作ってみた

css iPhone javascript

iPhoneでのCSS 3D Transforms利用の可能性を探るために、CSS 3D Transformsを使って3Dゲームを作ってみました。 javascriptによる3DゲームですがiPhoneのブラウザで結構スムーズに動きます。デモページ http://ndruger.lolipop.jp/hatena/20110705/css_3d_g…

2011-06-19

iPhoneでヌルヌルキャラクターが動くゲームを作る方法

iPhone javascript css メモ

iPhoneのキャラクターがヌルヌル動いて、それらのキャラクターにタップ・フリックでいろいろ出来るアクションゲームの作成方法 canvasを使ったり、left, topをいじるとキャラクターのスムーズでないため、css animations + css transformsのtranslate()でキ…

2011-06-16

iPhoneのブラウザでのアニメーション手法を比較

css javascript iPhone

基本拡大・縮小を避ける下記の指定 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> iPhone4の解像度はiPhone3Gより縦・横に倍大きいが、width=device-widthを指定してもiPhone3Gと同じ320pxが返り、表示時に2倍に拡大されて描画される。style指定で見かけ上の拡大を避けれなくはないが、今回はしない。 </meta>…

2011-04-28

javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた

javascript css

CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。デモページ http://ndr…