Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Smart canvasで作るカジュアルゲーム

2,786 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Art & Photos
  • Be the first to comment

  • Be the first to like this

Smart canvasで作るカジュアルゲーム

  1. 1. Copyright © 2013 / HITOKUSE Inc Smart Canvasで作るカジュアルゲーム 勉強会 2013年7月
  2. 2. Copyright © 2013 / HITOKUSE Inc 株式会社ヒトクセ ITの力を駆使して、 人々の生活に新しい体験を生み出す。 「体験をデザインする」ことで日常に溶け込み、人々の「癖」になるような サービスをヒトクセあるメンバーとプランで実現します。
  3. 3. Copyright © 2013 / HITOKUSE Inc 講師紹介 朱 静儀 ゲームクリエイター/ プロデューサー 2008.4 来日 2012.2 株式会社ペーパーボーヤ 2013.1 株式会社ヒトクセ 2013.3 早稲田大学教育学部数学科 卒業 経歴 実績 2012.2 株式会社ペーパーボーヤ 2012.12 AP COMMUNICATIONS サンタソン 優秀賞 2013.1 NTTレゾナントChallengers ハッカソン 優勝 2013.1 株式会社ヒトクセ 2013.3 京都まゆまろ杯 スマホアプリコンテスト     準優勝、ドリコム賞
  4. 4. Copyright © 2013 / HITOKUSE Inc 「プログラミング無しでWebアプリを作成」 スマートフォンWebアプリ  作成ツール http://smartcanvas.net/
  5. 5. Copyright © 2013 / HITOKUSE Inc トレモ郎の紹介 トレモ郎のおはなしがスマホで楽しめるよ! http://smart4me.net/tolemo/ トレモ郎は、ゲームが大好きで、いつもiPhoneで一人で遊んでいます。 青い生き物は にもの といいます。色んな種類(色)の にもの がいます。
  6. 6. Copyright © 2013 / HITOKUSE Inc 今日作るゲームの紹介 http://smartcanvas.net/user/329/expose/773 トラップタップハンティング ∼トレモ郎救出編∼ 檻に閉じ込められたトレモ郎を 救出せよ!
  7. 7. 勉強会参加者限定素材配布
  8. 8. Copyright © 2013 / HITOKUSE Inc まずは登録 ①ブラウザでhttp://smartcanvas.net にアクセス ※是非「いいね」してください ②会員登録
  9. 9. Copyright © 2013 / HITOKUSE Inc 新規作成 ①マイページの「新規作成」ボタンを押して、 新しいアプリを作る
  10. 10. Copyright © 2013 / HITOKUSE Inc トレモ郎素材をゲット!① ①コンテストページhttp://cts.sc/to にアクセス ②エントリー!!※エントリーしないと素材もらえませんよ! ③コンテスト限定素材申請  http://bit.ly/19tVws4 にアクセス
  11. 11. Copyright © 2013 / HITOKUSE Inc トレモ郎素材をゲット!② ①コンテスト事務局からメールを確認 ②リンクhttp://smartcanvas.net/items にアクセス ③秘密のパスワードを入力
  12. 12. Copyright © 2013 / HITOKUSE Inc 制作ツールページを更新 ① 制作ツールページを更新 ②キャンペーンアイテムが追加されることを確認
  13. 13. Copyright © 2013 / HITOKUSE Inc ページのサイズを変更 ① 「サイズ」ボタンを押す ②プリセット「iPhone ~4S Safari 320×416」に変更   ※プリセットは必ず設定してください。
  14. 14. Copyright © 2013 / HITOKUSE Inc 画像アップロード ① 「画像アップロード」ボタンをタップ ②title_bg.pngを追加
  15. 15. Copyright © 2013 / HITOKUSE Inc プロパティを設置 ①プロパティを以下のように設定 横幅 320px 高さ 416px x座標 0px y座標 0px 角度 0.0度
  16. 16. Copyright © 2013 / HITOKUSE Inc プレビュー プレビュー!! 画像が表示された!
  17. 17. Copyright © 2013 / HITOKUSE Inc さらに画像アップロード ①title_tolemorou.pngを追加 ②プロパティを以下のように設定
  18. 18. Copyright © 2013 / HITOKUSE Inc ページ追加 ①ページ追加 ②プリセット「iPhone ~4S Safari 320×416」に変更 ③bg.pngを追加 ④プロパティを設定 ⑤トレモ郎画像追加
  19. 19. Copyright © 2013 / HITOKUSE Inc 編集ページを変える ①「全体モード」ボタンを押す ②「ページ1」を押す
  20. 20. Copyright © 2013 / HITOKUSE Inc 図形を追加 ①基本アイテム→図形を追加 ②スタートボタンの上に配置
  21. 21. Copyright © 2013 / HITOKUSE Inc リンクを設定、透明度を変更 ①図形を選択 ②リンクをページ2に指定 ③透明度を0にする
  22. 22. Copyright © 2013 / HITOKUSE Inc プレビュー プレビュー!! シーン遷移が出来た!
  23. 23. Copyright © 2013 / HITOKUSE Inc アイテム名前を修正 ①アイテムをタップ ②名前を修正
  24. 24. Copyright © 2013 / HITOKUSE Inc アニメーション① ①「アニメーション」タブをタップ ②「アニメーション作成」ボタンをタップ
  25. 25. Copyright © 2013 / HITOKUSE Inc アニメーション② ①詳細を以下のように設定、作成ボタンを押す ②title_tolemorouの透明度を0にする
  26. 26. Copyright © 2013 / HITOKUSE Inc プレビュー プレビュー!! アニメーションが出来た!
  27. 27. Copyright © 2013 / HITOKUSE Inc ページの名前を修正 ①ページ2の名前を「level01」に修正
  28. 28. Copyright © 2013 / HITOKUSE Inc 檻を追加 ①ori.pngを追加 ②「ori」に名前変更 ③プロパティを変更
  29. 29. Copyright © 2013 / HITOKUSE Inc アニメーション作成 ①以下のようにアニメーションを作成
  30. 30. Copyright © 2013 / HITOKUSE Inc プレビュー プレビュー!! 檻が動いた!!
  31. 31. Copyright © 2013 / HITOKUSE Inc ゲームクリア画面を作る ①ページ追加 ②gameclear画面を作る ③リンクをタイトル画面 に指定
  32. 32. Copyright © 2013 / HITOKUSE Inc ゲームオーバー画面を作る ①ページ追加 ②gameover画面を作る ③リンクをタイトル画面 に指定
  33. 33. Copyright © 2013 / HITOKUSE Inc リンク先を設定 ①檻のリンク先を「gameover」に設定 ②トレモ郎のリンク先を「gameclear」に設定
  34. 34. Copyright © 2013 / HITOKUSE Inc プレビュー プレビュー!! ゲームが出来た!!
  35. 35. Copyright © 2013 / HITOKUSE Inc チャレンジ!! ステージとアニメーションを増やせば 「トラップタップハンティング」が作れる! http://smartcanvas.net/user/21/expose/665
  36. 36. Copyright © 2013 / HITOKUSE Inc 公開① ①マイページにアクセス ②公開設定ボタンを押す
  37. 37. Copyright © 2013 / HITOKUSE Inc 公開② ①「全て公開する」に変更
  38. 38. Copyright © 2013 / HITOKUSE Inc 公開③ ①アプリのリンクが表示される! ②リンクを友達に教えてたり、シェアしてみよう!
  39. 39. Copyright © 2013 / HITOKUSE Inc アプリ情報変更① ①設定ボタンを押す
  40. 40. Copyright © 2013 / HITOKUSE Inc ①アプリの情報が変更出来る! アプリ情報変更②
  41. 41. Copyright © 2013 / HITOKUSE Inc ①アプリの情報が更新された! アプリ情報変更③
  42. 42. 是非面白いアプリをいっぱい作って下さい! 本日はありがとうございました!

×