enchant.js 「enchant.js(エンチャント・ジェイエス)」は、「HTML5+JavaScript」ベースのゲームエンジン。 Windows、Mac、iPhone、iPad、Android、Windows Phoneの全てで動作するアプリを開発できるスタンドアロンなライブラリ。 サポートしているブラウザは次の通り。 Chrome Firefox Safari Internet Explorer iPhone/iPad Android Windows Phone
IE6はタヒぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます(既婚者が多いので残っている人は少ない)。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ:文書型定義 IE向け条件付きコメントで分岐処理
デザインパターンってなんだかたいそうなものに考えられがちだけど、実は、そこかしこのライブラリや仕様に取り込まれていることが多い。 「デザインパターン分からん」とか「で、どうやって使うのよ」と悶々としている人には、「どういうところで使わているのか」を知っておけばイメージも沸きやすいし、意外にたいしたことないんだな、ということが分かるんじゃないだろうか。 そこで、JavaScript やその周辺の技術で、デザインパターンがどのように使われているかを紹介してみることにする。 ここでは、GoF本の順番に沿って、以下の11個のパターンを取り上げる。 生成に関するパターンFactory MethodAbstract FactoryBuilderPrototypeSingleton構造に関するパターンAdapterComposite振る舞いに関するパターンChain Of ResponsibilityI
JavaScript でプログラミングをするときに、オブジェクト指向の手法を使うのであれば、折角なのでデザインパターンを利用したいと思います。しかし、デザインパターンの本は、Java を対象に書かれているものが多く、単純には JavaScript へ応用できません。 僕はデザインパターンを覚えたてですし、JavaScript も修行中の身なので、分らないことだらけです。そこで、このブログを使って、みなさんと議論したいと思います。気軽にコメントを書いて下さい。 Java と JavaScript デザインパターンを考える上で障壁となる Java と JavaScript の違いをまとめてみましょう。 機能 Java JavaScript 変数の型 ある ない オブジェクトの型決め 宣言的 ダック・タイピング オブジェクトの性質 静的 動的 抽象クラス ある ない 関数を引数として渡せるか 渡
クラスを作る Javascriptに直接クラスを生成する仕組みははない。宣言があるのは変数だけで、あとは全部オブジェクト生成だから。 でも似たようなことを関数オブジェクトを使ってすることができる function Hoge(piyo){ var a = piyo; this.getA = function(){ return a; } } こんな感じ。これでフィールドaを持ち、それに対するアクセサを持つクラスが完成する。さらにaを引数で初期化するコンストラクタまで備えている。 ▲ ▼ プライベートフィールド JavascriptのスコープはJavaのようにブロックスコープではなく関数スコープになっている。これを利用すると普通privateと呼ばれる外部から隠蔽された変数を作ることができる。 例の変数「a」はプライベートなので外部のオブジェクトは直接アクセスできない。 さらにJavascri
JavaScript でアニメーションを作る アニメーションとは何? ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの? setInterval の意味が分からない こんな感じで書けないの? <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
様々な効果でWebページのUIをリッチにしてくれるjQuery。 今回は、そのjQueryのエフェクト動作を加速/減速させるためのプラグイン、「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを(自分用に)作ってみましたのでシェアしておきます。 「jQueryってなんじゃらほい」という方は先日書きました7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座をご一読ください。分かりやすいと僕の中で大評判です。 easingとは、エフェクトの動きを加速/減速させるための関数です。 (中略)特別なことをしなくても使うことの出来るeasingは”linear”と”swing”の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1
タイプライターで文字をタカタカ打つようなアニメーションでテキストを表示するjQueryプラグインです。 動きの緩急や停止もできて、ターミナルにコマンドを入力しているような動きが表現できます。 デモ デモページ こんなんできます。 使用するJavascript Typist jQuery Plugin jquery.typist.jsをダウンロードします。 HTML jQueryプラグインなので、jQueryの後にjquery.typist.jsをを読み込んであげます。 &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;&gt;&lt;/scr
Attach files by dragging & dropping, selecting or pasting them. Uploading your files… We don’t support that file type. Try again with a GIF, JPEG, JPG, MOV, MP4, PNG, SVG or WEBM. Attaching documents requires write permission to this repository. Try again with a GIF, JPEG, JPG, MOV, MP4, PNG, SVG or WEBM. We don’t support that file type. Try again with a GIF, JPEG, JPG, MOV, MP4, PNG, SVG or WEBM.
Backbone.jsで書き始めたら「Backboneどう?」と聞かれることがあったので、自分ではあんま語れるほど知らないけど「ここらへんの記事は素晴らしいよ!」というものをまとめておいたヽ(・ω・´)ゝ まずは読んでおくべきもの Backbone.js Advent Calendar 2011 なにはともあれまずはBackbone.js Advent Calendar 2011 ある程度まで書けるようになる情報は総ざらいで書いてあると思う。 中でもBackbone.js入門はありがたい。読んでおけば基本の仕組みを知ることが出来る。 Backbone.jsが依存しているunderscore.jsの情報なんかもあったりしてありがたい。 ちなみに今年(2012)のAdvent Calendarはこちら。今はまだ始まったばかりだから情報少ないけどこれから充実してくるだろうし楽しみ(´ω`) Ba
アラートやコンファームやプロンプトの通知ダイアログ、ユーザーがOKやCancelをクリックしたことを伝えるパネルを簡単に実装できるスタンドアローンのスクリプトを紹介します。 alertifyjs alertifyjs -GitHub alertifyjsの特徴 alertifyjsのデモ alertifyjsの使い方 alertifyjsの特徴 alertifyjsは簡単にカスタマイズができる通知システムを実装できるJavaScriptです。 alert, confirm, promptの全通知ダイアログはフルカスタマイズが可能。 通知システムもカスタマイズが可能。 OKとCancelの両方のボタンにコールバックに対応。 ダイアログを連携させることも可能。 alertifyjsのデモ promptの通知ダイアログと通知システムを表示 alertifyjsの使い方 Step 1: 外部ファイ
4. Node ● サーバサイド javascript ● イベントドリブン ● シングルスレッド ● C10K(1 万クライアント ) 問題に対応 ● javascript は遅そう? → javascript は今や遅くない 5. websocket ● はやりの HTML5 な技術 ● http 上で VPN 張るイメージ ● socket.io というフレームワークが超優れもの → websocket 非対応のクライアント上でも同 じ API で通信できる
対象読者 HTMLやJS(HTML5)の基礎知識があるユーザー アニメーションやインタラクティブコンテンツを作りたいユーザー 必要な環境 Windows 7以上、またはMac OS 10.6以上。 Adobe Creative Cloudに登録が必要ですが、バージョン1は無償メンバーシップでも利用することができます。 Adobe Edge Animateとは? Adobe Edge Animate(以下、Edge Animate)は、タイムラインを使って直感的にアニメーションやインタラクティブコンテンツを作ることができるツールです。 Adobe Creative Cloudに登録すると使えるツールです。なので、一見するとオマケのように見えますが、「アニメーションやインタラクティブコンテンツをHTML/CSS/JavaScript形式で出力してくれる」という、とても便利なツールです。 タイム
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前:CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
enchant.jsでゲームを作って公開するとき、画面が左上に固定されてしまいます。 これはenchant.jsが最初にbody要素の直下にenchant-stageというDIV要素を作るので、レイアウトの変更は難しいのかなー? とおもってソースを覗いてみると、どうもすでにenchant-stageというIDの要素がある場合は、そこに表示してくれるようです。 ということは、これを上手く使うとゲームだけじゃなくflash的な使い方をサイトで使えるかな? 難点は必ずenchant-stageというID要素が必要になるので一つのページに複数のゲームを配置できないことですか。 なお、wordpressで設置するときの注意点ですが、game.preloadで画像をロードする際にパスを間違えないように注意。 サンプル(9leapに投稿したのをそのまま配置したので、スタートと終了の処理がおかしいです。)
avater.enchant.jsがいい感じ avater.enchant.jsがかなりイケてます。 簡単にキャラクタが表示できるというのは、絵心のないプログラマにはまさに福音! これで「絵がかけないからゲームつくれない」なんてちょっと意味のわからない言い訳が聞けなくなりますね! さて、このavater.enchant.js、好きなキャラメイクができるのもさることながら、デフォルトで何種類かの動きを備えています。 stop run attack special damage dead demo それぞれ、使いたいタイミングで player.action = "damage" とか指定してあげると こんな風にダメージうけてくれるわけです。キャワイイ! じゃぁ、なんか作りたいよね? さて、こんな横向きで、走ったり攻撃したりするキャラクタがいるんだから、横スクロールシューティングゲームを作りたく
tmlib.js のハッカソンイベントをやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います. 今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました. 怒濤って何?って方はこちらをどうぞ enchant.js 怒涛の 100 tips CoffeeScript 入門! 怒濤の 100 サンプル!! tmlib.js で定義されている tm.graphics.Canvas クラスは HTML5 Canvas を拡張したものなので HTML5 Canvas の機能は基本的にそのまま使えます. なので HTML5 Canvas の勉強にもなるかと思います. また, それに加え星型や多
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く