CurveEditorの使い方

braveshop.booth.pm

CurveEditorの使い方

f:id:Brave345:20200317163951p:plain

操作方法

・点の追加

ダブルクリックか点の追加ボタンで追加できます。

・点の削除

deleteキーか点の削除ボタンで選択している点を削除できます。

・アプリケーションの終了

Escキーでアプリケーションを終了できます。

グラフの編集

・点の移動

左端の点と右端の点以外は点を選択してる時のみ移動できます。

移動は点をドラックか入力項目に数字(0~1)を入力することで移動できます

これが点を選択してる状態です。点をクリックすることで選択できます。

f:id:Brave345:20200120115155p:plain

真ん中の点が選択点、上下にある点が制御点です。 制御点は点を選択してる時しか表示されません。

ドラックすることで点を複数選択できます。

またctrlキーを押しながら点を選択することでも複数の点を選択できます。

f:id:Brave345:20200323113340p:plain

線の編集

グラフを右クリックすることでメニューが出てきます。

・線を直線に 現在選択している線を直線にします。

現在制御点を移動させる機能なので、 常時直線になるのではなく、点を移動させたら線の形状も変わります。

・線を上下反転に 現在選択している点を上下反転させます。

ボタンから選択した場合はすべての点が上下反転します。

編集

・戻る Ctr + Zでひとつ前のグラフに戻ります。

ただしマウスホイールを使って数字を入力した場合はグラフの履歴は保存されません。

・進む Alt +Zで一つ先のグラフに進みます。

プリセット機能

プリセットを選択することでアイコン状態にすることが出来ます。

現在では自分でプリセットを追加することは出来ないです。 (exe単体で動作するようにしたいため。要望があれば追加するかも?)

f:id:Brave345:20200323114643p:plain

プレビュー機能

現在のグラフの状態で特定の値を動かしたらどのような挙動をするかを確認できます。

グラフによる値の動きの変化を移動、スケール、回転、アルファの4つの項目で確認できます。 f:id:Brave345:20200323114630p:plain

C# カーブエディタ進捗 プレビュー機能作成

前の記事

bravememo.hatenablog.com

完成図

だいぶレイアウトが変わりました。


CurveEditor ver 1 プレビュー機能追加

プレビュー機能作成

作成したグラフを使うとどのような挙動をするのかをすぐに確認できたらいいなーと思い作りました。

グラフの値に応じて黒い四角形が移動、回転、拡大縮小、フェードインフェードアウトを行うようにしました。

拡大縮小の実装方法はこちら

bravememo.hatenablog.com

描画更新のタイミング変更

いままではなにかの値が変わるたびに描画を更新してました。

ですがその実装だと複数の値が同時に変わった時に無駄な描画を更新するのを対策しないといけないため実装がすこし大変でした。

そこでゲームと同じように1/60秒ごとに描画を更新することで描画の更新タイミングを気にしなくていいようになりました。

public Form1()
{
      CompositionTarget.Rendering += RenderFrame;
}

//再生中の挙動
 private void RenderFrame(object sender, EventArgs e)
 {
        m_preview.Update();
        pictureBox1.Refresh();//再描画(グラフ用);
        pictureBox4.Refresh();//再描画(回転用);
          
 }

ソースコード

プレビュー機能部分だけ

using System;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
using System.Threading;
using System.Diagnostics;
namespace CurveEditor
{
    class Preview
    {
        double m_TotalTime = 0;//動いている時間
        double m_MoveTime = 1000;//一回の卯木気にかける時間
        double m_MoveRatio = 0;//今どのくらい時間がたってるかの割合
        bool m_isLoop = true;//動きをループさせるか
        bool m_isInversion = false;//動きを反転させるか
        VerticalLine m_VLine;//縦線
        System.Diagnostics.Stopwatch m_Stopwatch = new Stopwatch(); //時間を測る
        PointRender m_PointRender;//グラフを読み込む機能
        int movecnt = 0;//何フレーム目
        const decimal EndPosX = 470;
        const int PictureBoxSize = 50;//画像サイズ
        PictureBox[] m_PictureBox = new PictureBox[4];

        int m_NextScale = 0;//次の画像サイズ
        float m_NextAngle = 0;//次の画像の角度

        Image img2 = Properties.Resources.yazirusi;
        Bitmap bmp;
        //画像の種類
        enum ePnum
        {
            eMove = 0,
            eScale,
            eRot,
            ea,
        };
        public void SetP(PictureBox p,int i = 0)
        {
            m_PictureBox[i] = p;

        }
        public Preview()
        {
            bmp = new Bitmap(img2, 50, 50);
        }

        public void StartTimer()
        {
            m_Stopwatch.Restart();
            m_TotalTime = 0;
            FindRatio();
            m_VLine.SetX(m_MoveRatio);
            movecnt = 0;
        }

        public void StopTimer()
        {
           // m_TotalTime = 0;
            FindRatio();
            m_VLine.SetX(m_MoveRatio);
            m_Stopwatch.Reset();
        }

        //毎フレーム呼ばれる
        public void Update()
        {
            if (!m_Stopwatch.IsRunning) return;
            //端まで行ったら
            if(m_TotalTime >= m_MoveTime)
            {
                m_TotalTime = 0;
                if(m_isLoop)
                {
                    m_Stopwatch.Restart();
                    movecnt = 0;
                }
                else
                {
                    StopTimer();
                }
                return;
            }
            m_TotalTime = m_Stopwatch.ElapsedMilliseconds;
            if (movecnt == 0) m_TotalTime = 0;//一回目のデータ読み込みは強制0
            FindRatio();
            m_VLine.SetX(m_MoveRatio);
            MovePictureBox();
            movecnt++;
        }
        //グラフに沿ってPictureBoxを動かす
        public void MovePictureBox()
        {
            if (!m_Stopwatch.IsRunning) return;

            //Yを求める
            decimal y = m_PointRender.EvaluateY((decimal)m_MoveRatio);

            y = Math.Min(1, y);
            y = Math.Max(0, y);
            //移動
            int nextpos = (int)(y * EndPosX);
      
            m_PictureBox[(int)ePnum.eMove].Location = new Point(nextpos, 15);
            //スケール
            m_NextScale = (int)(y * PictureBoxSize);
            ScalingPictureBox();
            //回転
            m_NextAngle = (float)(y * 360 * 1);

            //アルファ
            int nextcolor = (int)(255 * y);
            m_PictureBox[(int)ePnum.ea].BackColor =  Color.FromArgb(nextcolor, 0,0,0);

        }

        public void FindRatio()
        {
            m_TotalTime = Math.Min(m_TotalTime, m_MoveTime);
            m_MoveRatio = m_TotalTime / m_MoveTime;
        }

        public void SetVLine(VerticalLine v)
        {
            m_VLine = v;
        }
        public void SetIsLoop(bool loop)
        {
            m_isLoop = loop;
        }
        public bool GetIsLoop()
        {
            return m_isLoop;
        }
        public void SetisInversion(bool inversion)
        {
            m_isInversion = inversion;
        }
        public void SetMoveTime(float Second)
        {
            double time = Second * 1000;
            m_MoveTime = time;
        }
        public void SetPointRender(PointRender p)
        {
            m_PointRender = p;
        }
        //次の回転取得
        public int GetScale()
        {
            return m_NextScale;
        }
        //次の角度種t九
        public float GetAngle()
        {
            return m_NextAngle;
        }
        public void Paint(Graphics g)
        {
            if (!m_Stopwatch.IsRunning) return;
 
        }
        //画像の拡大縮小
        public void ScalingPictureBox()
        {
            m_PictureBox[(int)ePnum.eScale].Height = m_NextScale;
            m_PictureBox[(int)ePnum.eScale].Width = m_NextScale;

            Point centerPos = new Point(170, 80);//中心の座標
            Point pos = new Point(0, 0);
            //中心から拡大させる
            pos.X = (centerPos.X - m_PictureBox[(int)ePnum.eScale].Width) / 2;
            pos.Y = (centerPos.Y - m_PictureBox[(int)ePnum.eScale].Height) / 2;
            m_PictureBox[(int)ePnum.eScale].Location = pos;
        }

        /// <summary>
        /// ビットマップ(Bitmap)を回転する画像取得
        /// </summary>
        /// <param name="angle">回転角度</param>
        /// <returns></returns>
        public Bitmap GetRotateBitmap( float angle =0 )
        {
            return bmp;
        }

    }
}

終わりに

次はグラフの編集機能を強化していきたいです。

次の記事

CurveEditor Libraryの使い方

CurveEditor Libraryの使い方

Visual Studio 2015以降で使うことが前提になっています。 ご了承ください。

github.com

Libファイルのパスを通す

リンカ 追加のライブラリディレクトリでlibが入ったフォルダのパスを通す。

リンカ 入力 追加の依存ファイルで使うlibを追加(↑の工程を飛ばして絶対パス指定でもできます)

関数一覧

CurveEditor Lib bool BezierPointList::ReadBezierPointList(std::string CSVpath)

引数 CSVpath : グラフデータ(csv)のパス

戻り値 グラフデータを正常に読み込めたか。

グラフデータを読み込みます。

double BezierPointList::EvaluateY(double x, bool isRound)

引数 x : 0~1の値 引数 : isRound: 計算の過程で出た誤差を丸めるか

戻り値 グラフデータからX対応するYを返します。グラフデータがおかしい場合は-100を返します。

XをうけとりグラフデータからX対応するYを返します。 誤差は少数第4位で四捨五入されます。

エラーコード

異常があった場合Debugビルドでエラーコードを出力します。

000 グラフデータの値に異常があります。

csvの中身を確認してください。

001 CSVファイルが開けません。

パスが間違っていないか確認してください。

002 方程式が解けませんでした。

グラフデータの値に異常がある可能性が高いです。 csvの中身を確認してください。  

C# カーブエディタ作成 ヘルプの作成

前の記事

bravememo.hatenablog.com

完成図

f:id:Brave345:20200120145646p:plain ここからHelpページを見れるようになります。

Hlepページを作成

こんな感じで作りました。自分のブログに作るのが一番早いなと思ったので自分のブログに作りました。

bravememo.hatenablog.com

ソースコード

System.Diagnostics.Process.Start("URL")で指定したURLにとぶことができます。

 private void カーブエディタの使い方ToolStripMenuItem_Click(object sender, EventArgs e)
 {
     System.Diagnostics.Process.Start("https://bravememo.hatenablog.com/entry/HelpCurveEditor");
}

終わりに

次あたりに大きめの機能を追加する予定です。

次の記事

CurveEditor_Freeの使い方

CurveEditor_freeの使い方

github.com

操作方法

f:id:Brave345:20200120115138p:plain

・点の追加

ダブルクリックか点の追加ボタンで追加できます。

・点の削除

deleteキーか点の削除ボタンで選択している点を削除できます。

・アプリケーションの終了

Escキーでアプリケーションを終了できます。

グラフの編集

・点の移動

左端の点と右端の点以外は点を選択してる時のみ移動できます。

移動は点をドラックか入力項目に数字(0~1)を入力することで移動できます

これが点を選択してる状態です。点をクリックすることで選択できます。

f:id:Brave345:20200120115155p:plain

真ん中の点が選択点、上下にある点が制御点です。 制御点は点を選択してる時しか表示されません。

線の編集

グラフを右クリックすることでメニューが出てきます。

・線を直線に 現在選択している線を直線にします。

現在制御点を移動させる機能なので、 常時直線になるのではなく、点を移動させたら線の形状も変わります。

編集

・戻る Ctr + Zでひとつ前のグラフに戻ります。 ただしマウスホイールを使って数字を入力した場合はグラフの履歴は保存されません。

・進む Alt +Zで一つ先のグラフに進みます。