enchant.jsを使ったゲームのサンプル
前回、Flixel+ActionScriptで書いたゲームを、enchant.js を使って書きました。
※これも少し前に作ったものなので、最新の enchant.js で動くかは分かりません。
プレイはこちらから。
操作方法は、カーソルキーの左右で移動、カーソルキーの上でジャンプ。足場を上に登っていくゲームです。
Flash版より手を抜いていて、タイトルも無ければゲームオーバーの処理もないので、永久に落下し始めたら終わりと思ってください。
再プレイはブラウザのリロードです。
コードは続きで。
Flixelを使ったゲームのサンプル
今回は Flixel という ActionScript 用のゲームエンジンを使ったゲームです。
これは作ったのが２年くらい前になるかもしれず、最新のライブラリで動くのか？今はもっと良いエンジンが出ているのではないか？などありますが、ゲームエンジンの考え方は基本的に一緒なので、取っ掛かりとして見てみるのも良いかもしれません。
プレイはコチラから
昔、ポケステにあったゲームを思い出しながらパクった感じです。
操作方法は、カーソルキーの左右で移動、カーソルキーの上もしくはスペースキーでジャンプ。です。
足場をたどって上まで進んでいくゲームです。
ランキングは実装していませんが、本当はランキングページにでも飛ばすつもりでした。
コードは続きに書きます。
【ActionScript】 3Dパネル
カーソルキーで上下左右に動きます。
Aキーで全体を見渡し、Zキーで拡大にもどせます。
実行ページはこちら。
なぜこんなものを作ったかと言うと、このパネル1枚ずつに何かしらの情報を載せ、
行き先ごとに裏通信を使いつつ、ブラウジングできるようなUIを作ってみたかったんです。
カーソルキーのみで様々なブラウジングができ、Aキーを押すと見てきた履歴が一目で辿れる。
ただし、今のとことこころパネルを作り出すところで終わっています。。
気が向いたら続きを書いていこうと思います。
コードの解説は以下。
processing.jsを使った簡単なサンプル2
前回の記事からだいぶ経ちましたが、予定通りインタラクティブな動きとパーティクルを使った動きを載せておきます。
左側の黒い箇所をクリック(or ドラッグ) すると白い線を左から右に流せ、右から流れてくる黒い線同様、中央にくると弾けます。
ちなみに、黒い線にうまく白い線をぶつけると赤色に弾けます。どうでもいいですが。
ということで、続きにコードを載せます。
processing.jsを使った簡単なサンプル
processing.js は、processing のコードをそのまま HTML5 の canvas 要素で動かしてしまおう。というものです。
公式ページはコチラ
とりあえずどのように動くのか見てください。簡単なサンプルのつもりが、WebGLが必要になってしまったので、サポートしている Chrome などのブラウザでアクセスしてください。
思ったより、動作早いですよね。
さて、まずはHTMLのコードから解説していきます。
【Javascript】 YouTubeプレイリストを便利にするブックマークレット
YouTubeのプレイリスト検索結果画面が少し前から、使いづらくなりました。
この画面です。
YouTubeプレイリスト検索結果のキャプチャ
YouTubeのプレイリストは作業中のBGMとして聴いたり、昼食中に眺めたり、とても便利でよく使っていました。
特に不便と感じたのは次の２点です。
(1) 検索結果までのステップが増えた
(2) プレイリストの内容閲覧画面がなくなった
です。
現在、プレイリストの検索結果に辿り着くには、
1. トップページからキーワードを入力して検索
2. 検索オプションを開く
3. 「プレイリスト」を選択する
このようなステップが必要です。以前はトップページからタブを選べば一発で検索できました。
また、プレイリストの検索結果、以前まではプリリストのタイトルなどをクリックすると、
そのプレイリスト内に含まれる動画が一覧表示されるページに遷移できました。 => こんなページ
しかし、今は自動的に再生画面に飛び、再生が始まります。
目的の動画で構成されたプレイリストなのかどうか確認するためにはとても大切なページでした。
と、不満を言ってるだけでは意味がないので、エンジニアらしく工夫で自己満足できるレベルまで改善していこうと思います。
【Processing】 Light Blossom
この作品は『Light Blossom』というタイトルにしていますが、光の軌道が花びらのように見えたので、
そのように命名していますが、それは狙ってできあがったものではありません。
今回は3D平面とカメラ、さらにblendというメソッドを利用してこれを実現しています。
ぜひコード解説をお読みいただき、偶然でも見れるものが作れるということを知っていただきたいと思っています。
【Processing】 Simple Paricles
今回はProcessingがもっとも得意とするであろうParticleの処理です。
いくつかの点が一塊となってランダムに動き回ります。
それぞれの点は発光しているので奇跡が残るし、点が集まれば光は強くなります。
今回はProcessing入門という視点でコードを解説しておこうと思います。
コードの解説は以下。
【Processing】 簡単な音声処理
以前、人から言われてためしに作ってみた、リアルタイムのエフェクトです。 ただし、エフェクトと呼べるほどマトモなものではなく、適当に波形データをいじくってます。 マウスカーソルの位置によって、エフェクトの適用量を変えており、右に持って行くほど強くなり、 マウスドラッグするとまた別のエフェクトに切り替わります。 起動中にファイル名を指定してmp3を変更できるように、テキストボックスを配置するために、 ・INTERFESCIA(http://www.superstable.net/interfascia/) を利用しています。 また、メインの音声（波形）処理には、 ・Minim(http://code.compartmental.net/tools/minim/) を利用しています。 ※コード利用の際には上記パスからライブラリをダウンロードしてください。 ■ソースファイル ダウンロード(.zip) ■実行ページ 実行（音が出ます）
各技術のインデックス
今回はまず最初の記事ということで、本サイトで取り上げる技術の公式ページと、よく使うリファレンスの直リンクを紹介しておきます。
Silverlightは実際あまりやっていないので怪しいです。。。ただ、今後やっていこうかなと興味があるので挙げています。
いずれそれぞれの紹介や、なぜ選択したのかも紹介していきたいとは思いますが、ひとまず以上です。