const settings = { scale: 500, waterLevel: 0, sandLevel: 0.15, grassLevel: 0.65, octaves: 3, persistence: 0.5 } function octavedNoise(x, y, octaves, persistence, noiseFn) { let total = 0 let frequency = 1 let amplitude = 1 let maxValue = 0 // Used for normalizing result to 0.0 - 1.0 for (let i = 0; i < octaves; i++) { total += noiseFn(x * frequency, y * frequency) * amplitude maxValue += amplitude amplitude *= persistence frequency *= 2 } return total / maxValue } class MyScene extends Phaser.Scene { constructor() { super({ key: 'MyScene' }) } preload() { this.load.image('water',`https://play.rosebud.ai/assets/Water.png.png?70uH`); this.load.spritesheet('tiles', `https://play.rosebud.ai/assets/Tilemap_Flat.png.png?1YPy`, { frameWidth: 64, frameHeight: 64 }); this.load.json('mapData', `https://play.rosebud.ai/assets/map.json.json?7DK3`); } create() { this.add.image(400, 300, 'water').setScale(100); this.map = Array(800).fill().map(() => Array(600).fill(0)); this.loadNoise(); this.loadClipboard(); } loadNoise() { const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/noisejs@2.1.0/index.min.js'; script.onload = () => { console.log('noise.js loaded successfully'); this.noise = new Noise(Math.random()); // Initialize the Noise object with a random seed this.generateMap(); this.createUI(); }; script.onerror = (error) => { console.error('Error loading noise.js:', error); }; document.head.appendChild(script); } loadClipboard() { const script = document.createElement('script') script.src = 'https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js'; script.onload = () => { console.log('clipboard.js loaded successfully'); }; script.onerror = (error) => { console.error('Error loading clipboard.js:', error); }; document.head.appendChild(script); } update() {} createUI() { const startX = 20; let currentY = 20; const gapY = 50; const sliderWidth = 200; const sliderHeight = 10; const handleRadius = 10; const sliderHandles = {}; const settingTexts = {}; const addSettingDisplay = (settingName, settingKey, min, max) => { let settingText = this.add.text(startX, currentY, `${settingName}: ${settings[settingKey]}`, { font: '18px Arial', fill: '#FFFFFF' }).setDepth(3); settingTexts[settingKey] = settingText; const sliderBg = this.add.rectangle(startX + 5, currentY + 30, sliderWidth, sliderHeight, 0x888888).setOrigin(0, 0.5).setDepth(3); const sliderHandle = this.add.circle(startX + 5 + (settings[settingKey] - min) / (max - min) * sliderWidth, currentY + 30, handleRadius, 0xFFFFFF).setInteractive().setDepth(3); sliderHandles[settingKey] = sliderHandle; this.input.setDraggable(sliderHandle); sliderHandle.on('drag', (pointer, dragX, dragY) => { dragX = Phaser.Math.Clamp(dragX, sliderBg.x, sliderBg.x + sliderWidth); sliderHandle.x = dragX; let newValue = min + (dragX - sliderBg.x) / sliderWidth * (max - min); if (settingKey === 'waterLevel' && newValue > settings.sandLevel) { settings.sandLevel = newValue; sliderHandles['sandLevel'].x = sliderBg.x + (settings.sandLevel - min) / (max - min) * sliderWidth; settingTexts['sandLevel'].setText(`Sand Level: ${settings.sandLevel.toFixed(2)}`); if (settings.sandLevel > settings.grassLevel) { settings.grassLevel = settings.sandLevel; sliderHandles['grassLevel'].x = sliderBg.x + (settings.grassLevel - min) / (max - min) * sliderWidth; settingTexts['grassLevel'].setText(`Grass Level: ${settings.grassLevel.toFixed(2)}`); } } if (settingKey === 'sandLevel' && newValue > settings.grassLevel) { settings.grassLevel = newValue; sliderHandles['grassLevel'].x = sliderBg.x + (settings.grassLevel - min) / (max - min) * sliderWidth; settingTexts['grassLevel'].setText(`Grass Level: ${settings.grassLevel.toFixed(2)}`); } if (settingKey === 'grassLevel' && newValue < settings.waterLevel) { settings.waterLevel = newValue; sliderHandles['waterLevel'].x = sliderBg.x + (settings.waterLevel - min) / (max - min) * sliderWidth; settingTexts['waterLevel'].setText(`Water Level: ${settings.waterLevel.toFixed(2)}`); } if (settingKey === 'grassLevel' && newValue < settings.sandLevel) { settings.sandLevel = newValue; sliderHandles['sandLevel'].x = sliderBg.x + (settings.sandLevel - min) / (max - min) * sliderWidth; settingTexts['sandLevel'].setText(`Sand Level: ${settings.sandLevel.toFixed(2)}`); } settings[settingKey] = newValue; settingText.setText(`${settingName}: ${settings[settingKey].toFixed(2)}`); this.generateMap(this.data.get('noise')); }); currentY += gapY; }; addSettingDisplay('Scale', 'scale', 0, 1000); addSettingDisplay('Water Level', 'waterLevel', -1, 1); addSettingDisplay('Sand Level', 'sandLevel', -1, 1); addSettingDisplay('Grass Level', 'grassLevel', -1, 1); addSettingDisplay('Octaves', 'octaves', 0, 10); addSettingDisplay('Persistence', 'persistence', 0, 1); let generateButton = this.add.text(startX, currentY + 20, 'Generate New Map', { font: '20px Arial', fill: '#FF0000', backgroundColor: '#000000' }).setDepth(3).setInteractive(); generateButton.on('pointerdown', () => { this.noise.seed(Math.random()); this.generateMap(); }); let copySettingsButton = this.add.text(startX, currentY + 50, 'Copy Settings', { font: '20px Arial', fill: '#FF0000', backgroundColor: '#000000' }).setDepth(3).setInteractive(); copySettingsButton.on('pointerdown', () => { let settingsString = `Scale: ${settings.scale}\nWater Level: ${settings.waterLevel}\nSand Level: ${settings.sandLevel}\nGrass Level: ${settings.grassLevel}\nOctaves: ${settings.octaves}\nPersistence: ${settings.persistence}`; let dummy = document.createElement('textarea'); document.body.appendChild(dummy); dummy.value = settingsString; dummy.select(); document.execCommand('copy'); document.body.removeChild(dummy); console.log('Settings copied to clipboard successfully'); }); let copyMapButton = this.add.text(startX, currentY + 80, 'Copy Map', { font: '20px Arial', fill: '#FF0000', backgroundColor: '#000000' }).setDepth(3).setInteractive(); copyMapButton.on('pointerdown', () => { let mapString = this.map.map(row => row.join(",")).join("\n"); let dummy = document.createElement('textarea'); document.body.appendChild(dummy); dummy.value = mapString; dummy.select(); document.execCommand('copy'); document.body.removeChild(dummy); console.log('Map copied to clipboard successfully'); }); let saveMapButton = this.add.text(startX, currentY + 110, 'Save Map', { font: '20px Arial', fill: '#FF0000', backgroundColor: '#000000' }).setDepth(3).setInteractive(); saveMapButton.on('pointerdown', () => { this.saveMap(); }); } generateMap() { if (this.textures.exists('noiseTexture')) { this.textures.removeKey('noiseTexture'); } const canvasTexture = this.textures.createCanvas('noiseTexture', 800, 600); const context = canvasTexture.getContext(); const imageData = context.createImageData(800, 600); for (let x = 0; x < 800; x++) { for (let y = 0; y < 600; y++) { const elevation = octavedNoise(x / settings.scale, y / settings.scale, settings.octaves, settings.persistence, this.noise.simplex2.bind(this.noise)); this.map[x][y] = elevation; let r, g, b; if (elevation < settings.waterLevel) { r = 0; g = 0; b = 255; } else if (elevation < settings.sandLevel) { r = 240; g = 230; b = 140; } else if (elevation < settings.grassLevel) { r = 34; g = 139; b = 34; } else { r = 139; g = 69; b = 19; } const index = (x + y * 800) * 4; imageData.data[index] = r; imageData.data[index + 1] = g; imageData.data[index + 2] = b; imageData.data[index + 3] = 255; } } context.putImageData(imageData, 0, 0); canvasTexture.refresh(); if (this.image) { this.image.destroy(); } this.image = this.add.image(400, 300, 'noiseTexture').setOrigin(0.5, 0.5); } saveMap() { // Convert the 2D array to a JSON string const mapDataJSON = JSON.stringify(this.map); // Save the JSON string to local storage localStorage.setItem('mapData', mapDataJSON); console.log('Map saved to local storage'); } determineTileFrame(x, y, elevation) { // Initial tile type determination based on elevation let tileType; if (elevation < settings.waterLevel) { tileType = 'water'; } else if (elevation < settings.sandLevel) { tileType = 'sand'; } else if (elevation < settings.grassLevel) { tileType = 'grass'; } else { tileType = 'stone'; } // Example for checking all neighbors let neighbors = { top: this.map.getTileAt(x, y - 1, true), right: this.map.getTileAt(x + 1, y, true), bottom: this.map.getTileAt(x, y + 1, true), left: this.map.getTileAt(x - 1, y, true), }; // Logic to adjust `tileType` or choose a specific frame based on neighbors // This is where you'd implement more complex logic based on the types of the neighboring tiles // For example, changing a grass tile to sand if it's adjacent to water if (tileType === 'grass' && (neighbors.top?.properties.tileType === 'water' || neighbors.right?.properties.tileType === 'water' || neighbors.bottom?.properties.tileType === 'water' || neighbors.left?.properties.tileType === 'water')) { tileType = 'sand'; } if (tileType === 'water') { return 0; } return Phaser.Math.RND.pick(settings.tileCodes[tileType]); // Choose a frame based on the final `tileType` } } const config = { parent: 'renderDiv', type: Phaser.AUTO, scene: MyScene, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 800, height: 600, }, dom: { createContainer: true }, } window.phaserGame = new Phaser.Game(config)