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
改造などはご自由に！
使用報告は任意で大丈夫だけどあると嬉しい！！