差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
| lecture:ai_interaction_design [2020/12/23 09:46] – [2. Start with playing Mario] baba | lecture:ai_interaction_design [2021/03/09 02:37] (現在) – ↷ 移動操作に合わせてリンクを書き換えました。 baba | ||
|---|---|---|---|
| 行 16: | 行 16: | ||
| If you have any questions, please feel free to ask them via ZOOM chat or commentable. Since we only have 2 hours, if you have any difficulties in solving them on the spot, please review the archived videos that will be distributed later. | If you have any questions, please feel free to ask them via ZOOM chat or commentable. Since we only have 2 hours, if you have any difficulties in solving them on the spot, please review the archived videos that will be distributed later. | ||
| - | * Our comment app: https:// | + | * Our comment app: https:// |
| 行 35: | 行 35: | ||
| * style.css | * style.css | ||
| For more information on the role of each file, please see following page. | For more information on the role of each file, please see following page. | ||
| - | * [[processing:p5js: | + | * [[p5js: |
| On our workshop, we just check and play below examples. | On our workshop, we just check and play below examples. | ||
| 行 52: | 行 52: | ||
| Start with [[https:// | Start with [[https:// | ||
| + | ==== How do we control Mario ==== | ||
| + | Now, we can control Mario by pressing a keyboard. | ||
| + | * d: move left | ||
| + | * a: move right | ||
| + | * w: jump | ||
| + | * s: crouch | ||
| + | |||
| + | Let's change keyboard inputs to mouse inputs. This is a simple transformation of interaction. | ||
| + | * **What kind of mouse control design would you use?** | ||
| + | It is a simple question, but fundamental of interaction design. The key is to notice the experiential value that comes from not changing the game content, but only the interaction design. | ||
| + | |||
| + | Here, we try to control Mario with keyboard and mouse inputs referring a traditional game pad mental model. | ||
| + | {{ https:// | ||
| + | |||
| + | |||
| + | If you are accustomed to this type of general controller operation, you may find it easier to assign the jump button to your right hand and the directional controls to your left. | ||
| + | |||
| + | |||
| + | ===== 3. Control your Mario with Deep Learning ===== | ||
| + | I'm going to try to use something different instead of the usual keyboard and mouse for the controls. Yes, today I use camera. Here is my design. | ||
| + | |||
| + | * up right hand: move right | ||
| + | * up left hand: move left | ||
| + | * up both hands: jump | ||
| + | |||
| + | In order to achieve this kind of operation design, it used to be necessary to use computer vision to build advanced algorithms. However, recent AI technology, specifically deep learning, has made this kind of implementation easier. | ||
| + | There is a lot of knowledge and methods available in libraries for implementing deep learning, and it is impossible to introduce them in today' | ||
| + | * https:// | ||
| Now, let's put a camera captured image on the game screen, just like below. | Now, let's put a camera captured image on the game screen, just like below. | ||
| {{ : | {{ : | ||
| - | |||