2012. 5. 25. 11:47

Monaca + enchant.js でお手軽スマフォゲームアプリ開発

2012. 5. 25. 11:47 in My work space/Information

Monaca + enchant.js でお手軽スマフォゲームアプリ開発

icon松田惇│ コメント(8)│ トラックバック(0)
こんにちは。松田です。
今日は弊社で開発しているスマートフォン用アプリ開発環境のMonacaと、JavaScriptベースのゲームエンジンenchant.jsを組み合わせて、スマートフォン用ゲームアプリの開発をしてみたいと思います。

Monacaの公式サイトはここ。
http://monaca.mobi/

enchant.jsの公式サイトはこちらです。
http://enchantjs.com/ja/

MonacaはHTML5ベースのコードからAndroidアプリとiOSアプリを同時に生成できるツールです。
HTML5ベースで実装されているためenchant.jsのようなJavaScriptライブラリとの相性もよく、今回の記事のようにゲームアプリも簡単に実装できます。

1. Monacaアカウントの取得


まずはMonacaのアカウントを取得しましょう。下記URLからアカウントを作成します。
https://monaca.mobi/setup
ニックネームはさほど意味がないらしいので適当に。
ここで登録したメールアドレスがログイン用IDになります。
アカウントを作成したら右上のログインボタンからログインします。


2. プロジェクトの作成


次にダッシュボードからプロジェクトの作成を行います。
「プロジェクトを追加する」ボタンを押してプロジェクト情報を入力してください。
テンプレートは「HelloWorldデモ」にしておきます。


作成が終わると「IDE起動」ボタンが現れるので、ボタンを押してIDEを起動します。



3. debuggerインストール


次はdebuggerのインスールを行います。
Monacaは現状では実機上での確認しかできないため、iPhoneやiPod touch等のiOS端末かAndroid端末を用意し、
その端末にインストールしたdebugger上で動作を確認することになります。

下記のページを参考にデバッガをインストールして下さい。
http://docs.monaca.mobi/manual/debugger/

インストールが成功するとこんなふうにデバッガーアプリが表示されます。

自分はiPod touchで開発しています。


4. enchant.jsのダウンロード


これでMonacaの準備は整ったので、次はenchant.jsの用意です。
下記のページのDownloadリンクからenchant.jsをダウンロードします。
http://enchantjs.com/ja/

ダウンロードしたファイル内のenchant-package.zipを解凍すると、サンプルのアプリが3つ入っているので、今回はこの中のrpgを使います。


5. コーディング


IDEに戻りコーディングを行います。
と言っても今回はサンプルコードを動かしてみるだけなので、index.htmlの編集とファイルのアップだけで完成です。
rpgディレクトリ内の必要そうなファイルをIDEの左側のファイルツリーにアップロードしていきます。
アップロードするには、ツリーの要素を右クリックし、「アップロード」メニューの選択です。


RPGサンプルでは素材ファイルはディレクトリ分けされていないようなので、とりあえずそれに従ってwww直下に全部アップしておきました。
いらないファイルも混じっているような気もしますが放置。

次にindex.htmlの編集です。
RPGサンプルのindex.htmlで読み込んでいるjsファイルを読み込ませ、あとはbodyタグのいらない中身を消してしまえば完成です。

index.html
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>    
  4.         <meta name="viewport" content="initial-scale = 1, user-scalable=no">
  5.         <meta charset="utf-8">
  6.         <title>RPG sample on Monaca</title>
  7.         <script type="text/javascript" src="enchant.js"></script>
  8.         <script type="text/javascript" src="ui.enchant.js"></script>
  9.         <script type="text/javascript" src="game.js"></script>
  10.         <style type="text/css">
  11.             body {
  12.                 margin: 0;
  13.             }
  14.         </style>
  15.         {% if Device.Platform == IOS %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_ios.js"></script>{% endif %}
  16.         {% if Device.Platform == Android %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_android.js"></script>{% endif %}
  17.     </head>
  18.     <body data-role="page"></body>
  19. </html>
最終的には上記のようなコードになりました。
scriptを読み込ませてるだけですね。

6. debuggerで作成したアプリを実行


これで準備は整ったので早速debuggerで実行してみましょう。
debuggerを起動するとIDとパスワードが聞かれるので、Monacaのアカウントに登録したメールアドレスとパスワードを入力してください。
ログインに成功すると下の画像のようにMonacaで作成しているプロジェクトが表示されます。


RPGのプロジェクトを選びます。すると・・・

動きました！
パッドのアイコンをタッチするとちゃんとキャラクターが動きます！
サンプルのコードのままだと画面の長さが足りてませんが、そこはまた後々。


7. アプリのビルド


せっかくなのでアプリをインストールするところまで。
今回はデバッグ版のインストールを行います。
IDEの右上の「Android」「iOS」のうち使用しているOSを選択し、「ビルド設定」の項目をクリック。
ここで下のドキュメントに従って設定を行います。

iOS版ビルド設定
http://docs.monaca.mobi/manual/build/ios/

Android版ビルド設定
http://docs.monaca.mobi/manual/build/android/


iOS版ではAppleの開発者アカウントやら何やらが必要となるため、このあたりはAndroid版のほうが楽らしいです。

設定完了後に「iOS」→「ビルド」を選択すると、ビルドボタンがハイライトされているのでクリック。

あとはビルド完了までしばし待機です。

8. アプリのインストール


ビルドが完了すると「ネットワークインストール」のボタンが表示されますが、とりあえず無視です。
ここでもう一度debuggerを立ち上げます。
RPGプロジェクトを選択し、右下のボタンをクリックすると下のようなメニューが立ち上がります。

ここですかさず「ネットワークインストール」をクリック！


出た！


これでMonaca＋enchant.jsのゲームアプリ開発の基礎は完了です。


肝心のゲームのコードについては一切ふれませんでしたが、下記のブログ等でとてもわかりやすくまとめられているので必見です。
http://www.ideaxidea.com/archives/2011/04/where_to_learn_enchant_js.html
http://www.ideaxidea.com/archives/2011/04/enchant_rgb_undocumented.html

また、MonacaはPhoneGapが組み込まれているため、加速度センサーやカメラも組み合わせてゲームを作ることも可能になります。
どんな機能が使えるかは下記のPhoneGapリファレンスを参照ください。
http://phonegap-fan.com/docs/index.html


デバッグって・・・


Monacaデバッグしづれえよ！！という方は、とりあえずjsdo.it等でコーディングを行い、完成後に移植するという形も可能です。
enchant.js+PhoneGapの機能を使わないもの限定になりますが。。　Monacaチームがんばれっ！
http://jsdo.it/
enchant.jsを使ったゲームも多数アップされてるので参考になりますよ！

from : http://blog.asial.co.jp/858#trackback

'My work space > Information' 카테고리의 다른 글

추천 크롬(chrome) 브라우저 확장 30선  (0) 2012.05.25
구글공식 블로그에서 추천하는 크롬 브라우저 플러그인 19선  (0) 2012.05.25
[팁] 현재 설치된 구글 크롬 플러그인 정리  (0) 2012.05.25
Posted by schpritz
2012. 5. 25. 11:45

추천 크롬(chrome) 브라우저 확장 30선

2012. 5. 25. 11:45 in My work space/Information

추천 크롬(chrome) 브라우저 확장 30선

2011/04/13 By  4 Comments
DRCHOI 블로그를 방문하는 많은 분들이 사용하는 구글 크롬(Google chome) 확장자 및 앱 모음입니다. 크롬 브라우저로 즐거운 웹서핑 하십시오 :)

—-Utility—-

AdBlock
200만명 이상의 사용자와 함께 하는 가장 인기 있는 크롬 확장 프로그램. 인터넷 광고 차단!
설치된 크롬 앱에 쉽게 접근할 수 있도록 하는 확장.
appjump.jpg
중복된 북마크, 잘못된 북마크 링크를 찾아서 제거하는 확장
This is a simple scanner for your Google Chrome bookmarks. It checks for bad links and duplicates and displays a report if it finds something. It can be scheduled to run a scan every couple of days or not at all. It’s kind of like FireFox’s “Check Places”.
It looks slick, has bookmarks search and remembers the last opened folders and scroll position. It is also one of the most keyboard-accessible extensions.
IE Tab
Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome.
LastPass
LastPass is a free password manager and form fille.
Xmarks Bookmark Sync
여러 종류의 브라우저을 사용한다면 필수 애드온
Backup and sync your bookmarks, passwords and open tabs across computers and browsers. Xmarks is also available for Firefox, Safari and IE.
Smooth Gestures
다른 마우스 동작 확장에 비해 쉬운 사용법.
마우스 동작 확장 프로그램은 오른쪽 마우스 버튼을 누른 상태에서 마우스를 움직여 페이지 탐색 또는 탭 관리와 같은 명령을 실행합니다. 클릭하여 끌기 (마우스 동작), 클릭하여 스크롤하기 (스크롤 동작), 클릭하여 클릭하기 (로커 동작), 키보드 단축키 지원!
FreshStart – Cross Browser Session Manager
열려진 탭을 선택한 일부 또는 전부 저장하고 클릭 한 번에 열어볼 수 있는 확장.
Manage your browsing session easily with FreshStart! If you have different sets of websites that matter to you at work, at home or at different times, or if you have multiple users on your Chrome.
goo.gl URL Shortener
goo.gl url shortener is an extension which allows you to shorten the current website URL with the Google URL Shortener service http://goo.gl/

—-웹서핑 및 검색, SEO—-

신뢰할 수 있는 웹사이트를 방문하기 위한 필수 도구
Web of Trust is a safe browsing tool, which warns you about risky sites that cheat customers, deliver malware or send spam.
Wikipedia Companion – Mini Wiki Browser
Essential extension for any Wikipedia users. Full-featured: saves your recent wiki lookups, multi-lingual, back/forward and more!
TinEye Reverse Image Search
이미지로 이미지를 검색하는 확장.
Find out where an image came from, how it’s used, or find higher resolution versions.
tineye.jpg
Chrome SEO
The Google Chrome SEO Extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks
seo.jpg
Ultimate Chrome Flag
This extension shows a country or region flag indicating the location of the website you’re visiting. And the following information will be shown in the popup:
• Country or region name
• Domain name and IP address
• Geo information
• Google PageRank
• Alexa Rank
• WOT (Web of Trust) information
• Copy domain name and IP address to clipboard

—-생산성 향상 및 블로그—-

iReader
iReader allows you to view news stories and other articles in a single clutter-free page.
Google Mail Checker
Gmaill 받은편지함에서 읽지 않은 메일의 수를 나타냅니다. 또한 버튼을 클릭하여 받은편지함을 열 수도 있습니다.
Google Dictionary (by Google)
With this extension, you can:
1) Double-click any word to view its definition in a small pop-up bubble.
2) View the complete definition of any word or phrase using the address bar dictionary.
Amplify
Amplify lets you share your thoughts on any page, paragraph, image or video you find on the web and post them directly to Twitter, Facebook, Tumblr, Posterous, Friendfeed, delicious, diigo, Plurk and others
ScribeFire
ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to all of your blogs.
Write Space – Chrome Web Store
Write Space is a customizable full-screen text-editor that lives in your web-browser. It is designed to minimize the distractions that come between you and your writing.
writespace.jpg
Diigo Bookmark, Archive, Highlight & Sticky-Note
1. Bookmark links to archive webpages or to read later
2. Attach highlights & stickies to a webpage as a reminder
3. Share pages with annotation via Twitter, Facebook, Google Buzz
4. Access anywhere, via iPhone, iPad (http://bit.ly/e2ujpL), Android (http://goo.gl/tvbuq).
5. Create groups to pool findings, share resources or curate content
6. Automatically cross-post to social bookmarking site Delicious (optional)
Evernote로 클리핑
Evernote 확장을 사용하여 웹에서 본 것을 Evernote 계정에 저장하십시오. 이렇게 하면 노트에서 검색할 수도 있습니다.
Springpad – Chrome Web Store
Springpad is a free application that makes it quick and easy to take notes and save anything you want to remember in one place – from tasks and lists to products, places, movies, recipes and more. We automatically organize and enhance what you save with useful links and relevant offers to save you time and money. Everything you save is automatically synchronized and instantly accessible on the web and your phone.
chromeextension.jpg
thinkery – Chrome Web Store
thinkery helps you focus on the important things and lets you access tons of information in an instant. it is your extended brain on steroids.( thinkery)
Ibrii
Ibrii allows users to snip every type of content found on the internet no matter if it is simple text, a photo, a video or even an embedded object, like streaming audio.
ibrii.jpg
ChromeItLater
ChromeItLater is an unofficial client for Read it Later (readitlater).
Create Link
Copy current page title and URL to clipboard in various formats.
*plain text ([page title] [page URL])
*HTML link ([page title]

—-소셜네트워크—-

Chromed Bird
Chromed Bird is an awesome Twitter client extension for Google Chrome with lots of features.
HootSuite Hootlet
We call the Hootlet our secret weapon because it has the power to completely change how you use Twitter, Facebook and Linkedin.
hootsuite.jpg

'My work space > Information' 카테고리의 다른 글

Monaca + enchant.js でお手軽スマフォゲームアプリ開発  (0) 2012.05.25
구글공식 블로그에서 추천하는 크롬 브라우저 플러그인 19선  (0) 2012.05.25
[팁] 현재 설치된 구글 크롬 플러그인 정리  (0) 2012.05.25
Posted by schpritz
2012. 5. 25. 11:42

구글공식 블로그에서 추천하는 크롬 브라우저 플러그인 19선

2012. 5. 25. 11:42 in My work space/Information

구글공식 블로그에서 추천하는 크롬 브라우저 플러그인 19선

2010/07/16 By  10 Comments

구글 공식 블로그에서 크롬( google chrome) 브라우저를 프로처럼 사용할 수 있는 크롬 플러그인을 소개하고 있다. 구글러들이 가장 선호하는 플러그인 19개. 국내 사용자에게는 필요없는 플러그인도 몇 개 보이지만 크롬 플러그인 선택에 고민이 된다면 구글러들이 추천하는 플러그인은 필수.

Amplify’d from googleblog.blogspot.com
  • Opinion Cloud: Summarizes comments on YouTube videos and Flickr photos to provide an overview of the crowd’s overall opinion.
  • Google Voice: All sorts of helpful Voice features directly from the browser. See how many messages you have, initiate calls and texts, or call numbers on a site by clicking on them.
  • AutoPager. Automatically loads the next page of a site. You can just scroll down instead of having to click to the next page.
  • Turn Off the Lights: Fades the page to improve the video-watching experience.
  • Google Dictionary: Double-click any word to see its definition, or click on the icon in the address bar to look up any word.
  • After the Deadline: Checks spelling, style, and grammar on your emails, blog, tweets, etc.
  • Invisible Hand: Does a quick price check and lets you know if the product you are looking at is available at a lower price elsewhere.
  • Secbrowsing: Checks that your plug-ins (e.g. Java, Flash) are up to date.
  • Tineye: Image search utility to find exact matches (including cropped, edited, or re-sized images).
  • Slideshow: Turns photo sites such as Flickr, Picasa, Facebook, and Google Images into slideshows.
  • Google Docs/PDF Viewer: Automatically previews pdfs, powerpoint presentations, and other documents in Google Docs Viewer.
  • Readability: Reformat the page into a single column of text.
  • Chromed Bird: A nice Twitter viewing extension.
  • Feedsquares: Cool way of viewing your feeds via Google Reader.
  • ScribeFire: Full-featured blog editor that lets you easily post to any of your blogs.
  • Note Anywhere: Digital post-it notes that can be pasted and saved on any webpage.
  • Instant Messaging Notifier: IM on multiple clients.
  • Remember the Milk: The popular to-do app.
  • Extension.fm: Turns the web into a music library.

    • Read more at googleblog.blogspot.com

    See this Amp at http://amplify.com/u/7rgw

    from : http://dr-choi.kr/archives/1445

    'My work space > Information' 카테고리의 다른 글

    Monaca + enchant.js でお手軽スマフォゲームアプリ開発  (0) 2012.05.25
    추천 크롬(chrome) 브라우저 확장 30선  (0) 2012.05.25
    [팁] 현재 설치된 구글 크롬 플러그인 정리  (0) 2012.05.25
    Posted by schpritz
    prev Prev 1 2 3 4 ··· 84 Next next

    티스토리툴바