HSLツールのコード

main.js
function main(param) {
    let scene = new g.Scene({
        game: g.game,
        // このシーンで利用するアセットのIDを列挙し、シーンに通知します
        assetIds: ["player", "shot", "se"]
    });
    scene.onLoad.add(function () {
        // ここからゲーム内容を記述します
        // 各アセットオブジェクトを取得します
        let playerImageAsset = scene.asset.getImageById("player");
        let shotImageAsset = scene.asset.getImageById("shot");

        //背景色
        let background = new g.FilledRect({
            scene: scene,
            cssColor: "hsla(0, 0%, 100%, 1)",
            width: g.game.width,
            height: g.game.height,
            opacity: 1
        });
        scene.append(background);

        //　フォントに縁取り
        let huchiFont = new g.DynamicFont({
            game: scene.game,
            fontFamily: "UD デジタル 教科書体 NP-B",    //任意のフォント
            fontColor: "#FFF", strokeColor: "salmon",   //fontColorが文字の色、　strokeColorが縁の色
            strokeWidth: 10, //ここの数字が縁の大きさ
            size: 40
        });

        let huchiLabel = new g.Label({
            scene: scene,
            text: "これが縁取りされたテキストabc,123,ABC",
            font: huchiFont,
            fontSize: 40,
            x:240, y: 10
        });
        scene.append(huchiLabel);


        //hsla      色相、彩度、輝度、透明度  赤：0⁰, 緑：120⁰, 青：240⁰,
        //色変更ツール表示ボタン


        function hsla(){
            let tool_out = new g.FilledRect({
                scene: scene, cssColor: "#000", width: 110, height: 110,x: 1170, y:610
            });
            scene.append(tool_out);

            let tool_in = new g.FilledRect({
                scene: scene, cssColor: "#FFF",width: 100, height: 100,x: 1175, y:615,touchable: true
            });
            scene.append(tool_in);

            let paintToolGroup = new g.E({ 
                scene: scene,
            });

            let color_choice = new g.FilledRect({
                scene: scene, cssColor: "#111", width: 400, height: 500, x: 800, y: 100
            });
            paintToolGroup.append(color_choice);

            let hue = 0; 
            let saturation = 0;
            let lightness = 0;
            let alpha = 1;

            let sampleColor = new g.FilledRect({
                scene: scene,
                cssColor: "white",
                width: 75, height: 75,
                x: 980, y: 500
            });
            paintToolGroup.append(sampleColor);

            let text_H = new g.Label({
                scene: scene,
                text: "H(色相)",
                font: huchiFont,
                fontSize: 40,
                x:950, y: 130
            });
            paintToolGroup.append(text_H);

            //色相
            let rect_hue = new g.Sprite({
                scene: scene,
                src: shotImageAsset,
                width: shotImageAsset.width, height:shotImageAsset.height,
                anchorX: 0.5,
                scaleX: 2, scaleY: 2,
                x: 820, y:188,
                touchable: true
            });
            paintToolGroup.append(rect_hue);

            rect_hue.onPointMove.add((ev) => {
                rect_hue.x += ev.prevDelta.x;

                //三項演算子使用例
                //条件 ? 真の場合の値 : 偽の場合の値
                rect_hue.x = rect_hue.x > 1180? 1180: rect_hue.x < 820? 820: rect_hue.x;
                hue = (hue + ev.prevDelta.x) ;
                hue = hue > 360? 360: hue < 0 ? 0: hue;

                sampleColor.cssColor = "hsla("+ hue +","+ saturation +"%,"+ lightness + "%," + alpha +")";
                sampleColor.modified();
                

                rect_hue.modified();
                console.log(rect_hue.x);
                console.log(hue);
            });

            let text_S = new g.Label({
                scene: scene,
                text: "S(彩度)",
                font: huchiFont,
                fontSize: 40,
                x:950, y: 230
            });
            paintToolGroup.append(text_S);

            //彩度
            let rect_saturation = new g.Sprite({
                scene: scene,
                src: shotImageAsset,
                width: shotImageAsset.width, height:shotImageAsset.height,
                anchorX: 0.5,
                scaleX: 2, scaleY: 2,
                x:  820, y:288,
                touchable: true
            });
            paintToolGroup.append(rect_saturation);

            rect_saturation.onPointMove.add((ev) => {
                rect_saturation.x += ev.prevDelta.x;

                //三項演算子使用例
                //条件 ? 真の場合の値 : 偽の場合の値
                rect_saturation.x = rect_saturation.x > 1180? 1180: rect_saturation.x < 820? 820: rect_saturation.x;
                saturation = (saturation + ev.prevDelta.x/3.6) ;
                saturation = saturation > 100? 100: saturation < 0 ? 0: saturation;

                sampleColor.cssColor = "hsla("+ hue +","+ saturation +"%,"+ lightness + "%," + alpha +")";
                sampleColor.modified();
                rect_saturation.modified();
                
            });

            let text_L = new g.Label({
                scene: scene,
                text: "L(輝度)",
                font: huchiFont,
                fontSize: 40,
                x:950, y: 330
            });
            paintToolGroup.append(text_L);

            //輝度
            let rect_lightness = new g.Sprite({
                scene: scene,
                src: shotImageAsset,
                width: shotImageAsset.width, height:shotImageAsset.height,
                anchorX: 0.5,
                scaleX: 2, scaleY: 2,
                x: 820, y:388,
                touchable: true
            });
            paintToolGroup.append(rect_lightness);

            rect_lightness.onPointMove.add((ev) => {
                rect_lightness.x += ev.prevDelta.x;

                //三項演算子使用例
                //条件 ? 真の場合の値 : 偽の場合の値
                rect_lightness.x = rect_lightness.x > 1180? 1180: rect_lightness.x < 820? 820: rect_lightness.x;
                lightness = (lightness + ev.prevDelta.x/3.6);
                lightness = lightness > 100? 100: lightness < 0 ? 0: lightness;

                sampleColor.cssColor = "hsla("+ hue +","+ saturation +"%,"+ lightness + "%," + alpha +")";
                sampleColor.modified();
                rect_lightness.modified();
                
            });

            let text_a = new g.Label({
                scene: scene,
                text: "透(強)",
                font: huchiFont,
                fontSize: 30,
                x:850, y: 430
            });
            paintToolGroup.append(text_a);

            let text_ab = new g.Label({
                scene: scene,
                text: "透(弱)",
                font: huchiFont,
                fontSize: 30,
                x:1100, y: 430
            });
            paintToolGroup.append(text_ab);

            let alpha_minus = new g.Sprite({
                scene: scene,
                src: playerImageAsset,
                width: playerImageAsset.width, height:playerImageAsset.height,
                scaleX: 2, scaleY: 2,
                x: 850, y:500,
                touchable: true
            });
            paintToolGroup.append(alpha_minus);

            let alpha_plus = new g.Sprite({
                scene: scene,
                src: playerImageAsset,
                width: playerImageAsset.width, height:playerImageAsset.height,
                scaleX: 2, scaleY: 2,
                x: 1120, y:500,
                touchable: true
            });
            paintToolGroup.append(alpha_plus);

            alpha_minus.onPointDown.add(() => {
                sampleColor.opacity -= 0.1;
                if(sampleColor.opacity < 0){
                    sampleColor.opacity = 0;
                }
                sampleColor.modified();
            });
            alpha_plus.onPointDown.add(() => {
                sampleColor.opacity += 0.1;
                if(sampleColor.opacity > 1){
                    sampleColor.opacity = 1;
                }
                sampleColor.modified();
            });

            tool_in.onPointDown.add(() => {

                tool_in.cssColor =  tool_in.cssColor === "#FFF" ? "blue" : "#FFF";
                tool_in.modified();

                if (paintToolGroup.hidden) {
                    paintToolGroup.show();
                    paintToolGroup.hidden = false;
                } else {
                    paintToolGroup.hide();
                    paintToolGroup.hidden = true;
                }
            });

            scene.append(paintToolGroup);
        }
        hsla();

        // ここまでゲーム内容を記述します
    });
    g.game.pushScene(scene);
}
module.exports = main;
画面はこんな感じ。
右下の四角で表示、非表示切り替え。
不透明度は0.1で変動　最小0 最大1
改造などはご自由に！
使用報告は任意で大丈夫だけどあると嬉しい！！