---
# System prepended metadata

title: 作品制作

---

# 作品制作

## コンセプト
一部の人に絞るでいいから、特に何か問題解決をするものじゃないけど、でも楽しい、そう思えるようなもの

## 条件
PC上で動かせるもの。ただし、動作環境の制限は今回はなし。なのでwebでもデスクトップでもOK。

## 作成物候補列挙
<details><summary>秘匿</summary><div>
<ul>
    <li>手書き入力した漢字の正確な読み取り機能を備えた自動採点アプリ</li>
    <li>scriptyperの改良版</li>
    <li>作曲アプリ</li>
    <li>イラストブログ</li>
    <li>既存の銃のモデリング</li>
    <li>キャラ追加が可能なゲーム</li>
    <li>弾幕STG + FPS</li>
    <li>デスクトップにキャラクターを表示させて自由に動かす</li>
</ul>
</div></details>

## 期間
10/06 ~ 2/09
### キャッチアップ期間(予定)
~~10月いっぱい~~

## 候補詳細
### デスクトップにキャラクターを表示させて自由に動かす
機能要件もとい完成イメージとしてはこんな感じ(ディレクトリ内入り込みはむずそうかつ危なそうなのでなしで)
https://www.pixiv.net/artworks/21383759
音声もつけるか検討中(入れるとしても効果音ぐらいしかできないが)

コマンドラインでもよし、キャラクターの箇所をクリックなりカーソルなりして動かすもよし
言語： python?
動かすOSを決めておかないと・・・できればWindows版とLinux版を用意したい
まずはコマンドラインで動かせることを目標に

#### 実現方法
画面いっぱいにキャラが動くフィールドを作成し、その中を動く。無論、従来のシステムを普通に動かせるように
こうすれば、コマンドラインで専用コマンドを入力すれば動けるのではないか？
クリックすると発動するエモートは、コマンドラインでも発動可能にするので、クリックした際、影でコマンドが入力されるようにする？

歩くモーションやエモートモーションのgifを作成し、例えば移動する際には歩くモーションのgifを適用させながらオブジェクトの座標を移動させる
歩くモーションのgifは前後左右4つ作らなければならない(キャラは必ずしも左右対称というわけではない上に、今回は2Dなので)

非常に参考になるかもしれないurlたち
- https://qiita.com/sugarflower/items/74281bed307a6e31ae3b

#### キャラクター

<details><summary>候補列挙は秘匿</summary><div>
    <ul>
        <li>フランちゃん</li>
        <li>星の子</li>
        <li>小傘ちゃん</li>
        <li>闇の蟹</li>
        <li>暗黒龍</li>
        <li>ルミャ</li>
    </ul>
    </div></details>

今回は中間発表とかで皆に見せるので、闇の蟹を作成します

***こんなやつですね***
![](https://i.imgur.com/yj5tgjd.png)


闇の蟹モーション
- 歩く(前後左右)
- 突進(前後左右)
- 警戒(突進前の左右に揺れるアレ)
- ひっくり返り(方向は一方)
- ひっくり返った後の足ジタバタ

前進＝＞下方向
後退＝＞上方向

MikuMikuDanceでできればモデリングしたい
モーションを録画し.gif化。適用させる

いずれもまずは特定のキーを押すと動くようにするのが先決

***ドラッグ移動はひっくり返ったときにのみできるものとする***

#### コード例
今回キャラが動くフィールドはTkinterで実現。
キャラクターのオブジェクトはcanvas内に常に配置。canvasの大きさはキャラ画像と同じ大きさで、移動の際はcanvasごと座標を変える

Tkinterウィンドウの透過(snowのままだと真っ白なので注意)
```
root.wm_attributes('-transparentcolor','snow')
```

Tkinter全画面表示
```
root.attributes('-fullscreen', True)
```

EscapeキーでTkinterウィンドウを閉じる(escキーのコードは27)
```
def onKeyPressed(event) :
    if event.keycode == 27 :
        root.destroy()
        
root.bind('<Key>', onKeyPressed)
```

枠を消す
```
root.overrideredirect(True)
```

最前線に持ってくる
***(これを書かないと図形の外をクリックしたときescキーでのdestroyができなくなるので注意！)***
```
root.attributes("-topmost", True)
```

キャンバスの新規作成
```
canvas = tkinter.Canvas(
    tkinter.Tk(),
    bg='#003300',
    height=monitor_size.getHeight(),
    width=monitor_size.getWidth()
    )
```

キャンバスの初期の位置を指定
```
canvas.place(x=0, y=0)
```

モニター画面のサイズの取得(別ファイルで用意: monitor_size.py)
```
import pyautogui as pg # 別途インストールが必要な場合あり

def getWidth() :
    scr_w = pg.size().width
    return scr_w

def getHeight() :
    scr_h = pg.size().height
    return scr_h
```

```
import monitor_size as mnts

w = mnts.getWidth()
h = mnts.getHeight()
```

##### 動画の読み込み

cv2なるモジュールが必須。
ない場合は以下のコマンドでインストール
```
pip install opencv-python
```

canvasを使った方法ではないが、こちらはおすすめ(成功済み)
https://qiita.com/KentoSugiyama7974/items/b1a30a25dc4af7f1cdfe

VideoCapture()の引数に動画ファイルのパスを入力してやればOK
https://imagingsolution.net/program/python/tkinter/display_opencv_video_canvas/

画像処理が必要なので、Pillow(PIL)なるものが必要。ない場合は以下のコマンドをたたいてインストール
```
pip install pillow
```

#### mmdキャッチアップ

モーションのプログラムが完成し次第行う予定

#### テスト系列

- tkinterの簡易的な画面が表示されるか
  - ```tk.Tk().mainloop()```のみのコードで行う
- escキーで終了できるか
- canvasが表示されるか
  - 背景色は黒
  - 位置指定も値を変えて行う
- canvas内の図形はドラッグできるか
  - canvasの大きさは画面面積の9倍にして、その中心を映す感じで
- canvas内に動画が表示されるか
  - 起動したのと同時に再生される
  - ウィンドウを閉じない限り無限ループするように
- キーを押すごとに動画が変わるか<span style="font-weight: bold; color: red;">←Here Now!!</span>
  - 各動画のパスと対応するキーはJSONファイルとして格納
  - JSONを呼び出し該当する動画ファイルのパスを返すクラスファイルを作成

#### gitリポジトリ作成に当たり
作成ファイル：
- .gitignore
- requirements.txt
- README

リポジトリ名：DesktopMascot

#### .gitignore
```
__pychache__/
```

#### README
```
# DesktopMascot
Pythonで作成するデスクトップマスコット

## 導入方法
- ```git clone```でフォルダ作成
- ```pip install -r requirements.txt```で必要なモジュールのインストール
```
