Skip to content

Files

Failed to load latest commit information.

Latest commit

 Cannot retrieve latest commit at this time.

History

History
 
 

ja

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

🐟「Sakana!」リコリス紙人形劇

NPM License: MIT

デモ https://lab.magiconch.com/sakana/

さかなー---!!

複数のシチュエーションに対応しました! デート編

イラストの出典

大伏アオ @blue00f4 Pixiv

**イラスト 2 点(その 1その 2)の WEB ページでの掲載について、大伏アオ先生より非商用利用の許諾を得ました。 ) ** ヾ(^▽^ヾ)

機能

  • キャラクターをドラッグし、離すと反対方向にスイングします。
  • 台座をクリックするとキャラクターが切り替わります。
  • ジャイロセンサが使えるスマートフォンでは、スマートフォンを振ることで、キャラクターをスイングさせる。 #12 解決予定
  • キャラクターにランダムな大きさの力をランダムな間隔で加える自走式モード #7 @milkybird98
  • 効果音、マウスを離した時の効果音はランダムな間隔で鳴ります。 #9 @zthxxx
  • 多言語対応 #26 @dsrkafuu

リクエストパラメーター

  • リクエストパラメータに ?v=chisato を追加すると、錦木千束 になります。
  • リクエストパラメータに ?v=takina を追加すると、井ノ上たきな になります。
  • リクエストパラメータに ?alpha=true を追加すると、背景が透過されます。
  • リクエストパラメータに ?background=red を追加すると、背景をカスタマイズできます。 #FF00FF '#d77 url(chisato.png)' を利用できます。
  • リクエストパラメータに ?decay=0.99 を追加すると、キャラクターの動きの減衰の大きさを指定できます。 減衰なしの例 #11
  • リクエストパラメータに ?inertia=0.1 を追加すると、慣性の大きさを指定できます。 スーパースローの例
  • リクエストパラメータに ?lang=en-US を追加すると、言語を指定できます。 英語 日本語
  • リクエストパラメータに ?scale=auto を追加すると、キャラクターが小さい場合に身長と大きさを調整します。
  • リクエストパラメータに ?scale=0.5 を追加すると、キャラクターを拡大縮小できます。
  • リクエストパラメータに ?translateY=200px を追加すると、Y 軸方向の変位を指定できます。
  • リクエストパラメータに ?r=60 を追加すると、初期の傾きが 60 度になります。
  • リクエストパラメータに ?y=100 を追加すると、初期位置が Y 軸方向 100 の位置になります。

パラメータの組み合わせの例

個人サイトに導入

ソースコード

<div class="sakana-box"></div>
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
  Sakana.init({
    el: ".sakana-box", // 開始位置。ノードまたはセレクタ
    scale: 0.5, // 倍率
    canSwitchCharacter: true, // キャラクターの切り替え
  });
</script>

オプションとメソッド

// ミュート指定
Sakana.setMute(true);

// ミュートの状態を取得
const { isMute } = Sakana.Voices;

// 初期化
const sakana = Sakana.init({
  // オプション:デフォルト
  el: ".sakana-box", // 開始位置。ノードまたはセレクタ
  character: "takina", // キャラクターを指定。「ちさと」または「たきな」。
  inertia: 0.01, // 慣性
  decay: 0.99, // 減衰
  r: 60, // 初期角度
  y: 10, // 初期高さ
  scale: 1, // 倍率
  translateY: 0, // Y軸方向の高さ
  canSwitchCharacter: false, // キャラクターの切り替え
  onSwitchCharacter(character) {
    // キャラクターを切り替えた時に呼ばれる
    console.log(`${character} dayo~`);
  },
});

// 角度を指定
sakana.setOriginRotate(10);

// キャラクターの状態を取得する
const v = sakana.getValue();

// 動作確認
sakana.confirmRunning();

// キャラクターを切り替え
sakana.switchCharacter();

// ポーズ(一時停止)
sakana.pause();

// 動作を再開
sakana.play();

// キャラクターを指定
sakana.setCharacter("chisato");

ウィンドウの右下に配置

html .sakana-box {
  position: fixed;
  right: 0;
  bottom: 0;
  transform-origin: 100% 100%; /* 右下に配置するために変更 */
}

ローカル環境での変更

document.less.css に変換する必要があります。 #6

実行

  • npm i
  • npm run build

GitHub

https://github.com/itorr/sakana/

派生プロジェクト

SNS

https://weibo.com/1197780522/M2xbREtGI

License

MIT

Copyright (c) 2022, itorr