User prompt
Able to drag palette assets in the pixel art
User prompt
Add yellow palette asset above purple asset, and when pressing yellow palette asset, it shows yellow color
User prompt
Add purple palette asset above black palette asset, and when pressing purple palette asset, it shows purple color
User prompt
Add red palette asset above green palette asset, and when pressing red palette asset, it shows red color
User prompt
Add green palette asset above pink palette asset, and when pressing green palette asset, it shows green color
User prompt
Add black palette asset in the right side of palette asset, and when pressing black asset, it shows black color
User prompt
Add pink palette asset in the left side of palette asset, and when pressing pink palette asset, it shows color pink
User prompt
Add orange asset above blue palette asset, and when pressing orange asset, it shows orange color
User prompt
Gray color will show when palette asset is pressed
User prompt
When pressing palette asset, it shows gray color
User prompt
When pressing blue palette, it shows color blue
User prompt
Avoid palette asset to change colors and when pressing palette asset, it will show gray color
Initial prompt
Make blue palette asset and place it above the palette asset
var currentColor = 0x000000; var YellowPalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('yellowPalette', 'Yellow Palette Graphics', .5, .5); self.colors = [0xFFFF00]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var PurplePalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('purplePalette', 'Purple Palette Graphics', .5, .5); self.colors = [0x800080]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var RedPalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('redPalette', 'Red Palette Graphics', .5, .5); self.colors = [0xFF0000]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var GreenPalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('greenPalette', 'Green Palette Graphics', .5, .5); self.colors = [0x008000]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var BlackPalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('blackPalette', 'Black Palette Graphics', .5, .5); self.colors = [0x000000]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var PinkPalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('pinkPalette', 'Pink Palette Graphics', .5, .5); self.colors = [0xFFC0CB]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var OrangePalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('orangePalette', 'Orange Palette Graphics', .5, .5); self.colors = [0xFFA500]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var BluePalette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('bluePalette', 'Blue Palette Graphics', .5, .5); self.colors = [0x0000FF]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); currentColor = self.colors[0]; }); }); var Pixel = Container.expand(function () { var self = Container.call(this); var pixelGraphics = self.createAsset('pixel', 'Pixel Graphics', .5, .5); self.color = 0x000000; self.setColor = function (color) { self.color = color; pixelGraphics.tint = color; }; self.isDragging = false; self.on('down', function (obj) { self.setColor(currentColor); self.isDragging = true; }); self.on('up', function (obj) { self.isDragging = false; }); self.on('move', function (obj) { if (self.isDragging) { self.setColor(currentColor); } }); stage.on('move', function (obj) { if (self.isDragging) { self.setColor(currentColor); } }); stage.on('up', function (obj) { self.isDragging = false; }); }); var Palette = Container.expand(function () { var self = Container.call(this); var paletteGraphics = self.createAsset('palette', 'Palette Graphics', .5, .5); self.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFFFFF, 0x000000, 0x808080]; self.on('down', function (obj) { self.isDragging = true; var pos = obj.event.getLocalPosition(self); self.x = pos.x; self.y = pos.y; }); self.on('move', function (obj) { if (self.isDragging) { var pos = obj.event.getLocalPosition(self.parent); self.x = pos.x; self.y = pos.y; } }); self.on('up', function (obj) { self.isDragging = false; }); }); var Game = Container.expand(function () { var self = Container.call(this); var pixels = []; var palette = self.addChild(new Palette()); palette.x = 2048 / 2; palette.y = 2732 - palette.height / 2; var pinkPalette = self.addChild(new PinkPalette()); pinkPalette.x = palette.x - palette.width / 2 - pinkPalette.width / 2; pinkPalette.y = palette.y; var redPalette = self.addChild(new RedPalette()); redPalette.x = pinkPalette.x; redPalette.y = pinkPalette.y - redPalette.height; var greenPalette = self.addChild(new GreenPalette()); greenPalette.x = redPalette.x; greenPalette.y = redPalette.y - greenPalette.height; var bluePalette = self.addChild(new BluePalette()); bluePalette.x = 2048 / 2; bluePalette.y = palette.y - bluePalette.height; var orangePalette = self.addChild(new OrangePalette()); orangePalette.x = 2048 / 2; orangePalette.y = bluePalette.y - orangePalette.height; var blackPalette = self.addChild(new BlackPalette()); blackPalette.x = palette.x + palette.width / 2 + blackPalette.width / 2; blackPalette.y = palette.y; var yellowPalette = self.addChild(new YellowPalette()); yellowPalette.x = blackPalette.x; yellowPalette.y = blackPalette.y - yellowPalette.height; var purplePalette = self.addChild(new PurplePalette()); purplePalette.x = yellowPalette.x; purplePalette.y = yellowPalette.y - purplePalette.height; var gridSize = 50; var pixelSize = 2048 / gridSize; for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var pixel = self.addChild(new Pixel()); pixel.x = i * pixelSize + pixelSize / 2; pixel.y = j * pixelSize + pixelSize / 2; pixels.push(pixel); } } LK.on('tick', function () { pixels.forEach(function (pixel) { if (pixel.isDragging) { pixel.setColor(currentColor); } }); }); });
===================================================================
--- original.js
+++ change.js
@@ -105,10 +105,23 @@
var self = Container.call(this);
var paletteGraphics = self.createAsset('palette', 'Palette Graphics', .5, .5);
self.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFFFFF, 0x000000, 0x808080];
self.on('down', function (obj) {
- currentColor = 0x808080;
+ self.isDragging = true;
+ var pos = obj.event.getLocalPosition(self);
+ self.x = pos.x;
+ self.y = pos.y;
});
+ self.on('move', function (obj) {
+ if (self.isDragging) {
+ var pos = obj.event.getLocalPosition(self.parent);
+ self.x = pos.x;
+ self.y = pos.y;
+ }
+ });
+ self.on('up', function (obj) {
+ self.isDragging = false;
+ });
});
var Game = Container.expand(function () {
var self = Container.call(this);
var pixels = [];