1 Востаннє редагувалося elektryk (25.10.2023 22:19:51)

Тема: Малювання персонажів для браузерної забави

Я замахався та замахав GPT

Ви будете сміятись, але я все ж таки намагаюсь створити браузерку.
Генерацію ландшафту ми з GPT освоїли.
А ще освоїли малювання ландшафту.
Можете нас поздоровити.
Тепер проблема в малюванні Котигорошка та інших персонажів.
Проблема в тому, що за персонажами не видно ландшафту, а видно фон персонажу.

Штучний интелект не може нічого вдіяти.
Я - тим більше.

Допоможете?

2

Re: Малювання персонажів для браузерної забави

Пробуйте підключити до вашої компанії ще ґуґл бард.

3

Re: Малювання персонажів для браузерної забави

Розкажіть ліпше, як там життя на кордоні з Мордором.

4

Re: Малювання персонажів для браузерної забави

Та нормально. Тревоги не кожен день. Прильоти і того рідше...

А чому ніхто не хоче допомогти?
Думаю, що для професіонала достатньо лише глянути і він побачить ньюанс...

5

Re: Малювання персонажів для браузерної забави

Щодо мене, то цей напрямок абсолютно не мій.

А ви б може детальніше описали проблему і опублікували б шматок, тоді й підказка якась в когось може знайшлася б.

elektryk написав:

Та нормально. Тревоги не кожен день. Прильоти і того рідше...

Ніфіга собі нормальність...

6

Re: Малювання персонажів для браузерної забави

а у анімації персонажа фон прозорий ( якщо робили анімацію gif або apng ) ?

Подякували: koala1

7

Re: Малювання персонажів для браузерної забави

elektryk написав:

Тепер проблема в малюванні .. персонажів.

Графіка растрова чи векторна ?
Який формат малюнка (jpeg, png, svg) ?

elektryk написав:

Проблема в тому, що за персонажами не видно ландшафту, а видно фон персонажу.

Шо таке "фон персонажу" ?

elektryk написав:

Допоможете?

З чим ?

8

Re: Малювання персонажів для браузерної забави

Ну, ось даю скрін.
Може він допоможе зрозуміти проблему??

Post's attachments

skrin.png 63.6 kb, 22 downloads since 2023-11-24 

9

Re: Малювання персонажів для браузерної забави

А формат малюнка png.

10

Re: Малювання персонажів для браузерної забави

Ви скинули скрін екрану, а не файл персонажу. Якщо фон картинки файла персонажу білий, зробіть його прозорим за допомогою ластику.

Подякували: koala1

11 Востаннє редагувалося plusxx (25.11.2023 16:13:27)

Re: Малювання персонажів для браузерної забави

elektryk написав:

Ну, ось даю скрін.
Може він допоможе зрозуміти проблему??

В чому ви робите png? Може вам при збереженні треба поставити галочку зберігати без фона або щось таке.

12

Re: Малювання персонажів для браузерної забави

Справа в тому, що картинки я поцупив з реальних ігор.
Там вони без фону, тобто з прозорим фоном.
А в мене чомусь ні...

13

Re: Малювання персонажів для браузерної забави

4 elektryk - лютий офтоп

Просто цікаво... Останнє повідомлення перед перервою 26.10.2023 07:18:29. Далі місяць затишшя. Де ви були? І як там зараз життя біля Мордору?...

14 Востаннє редагувалося elektryk (25.11.2023 22:22:07)

Re: Малювання персонажів для браузерної забави

Невже місяць пройшов!!
Як швидко плине час...

15

Re: Малювання персонажів для браузерної забави

відкрийте награбоване в редакторі, пройдіться по фону ластиком і знову збережіть. :)

16 Востаннє редагувалося plusxx (26.11.2023 11:17:24)

Re: Малювання персонажів для браузерної забави

На чім пишете браузерку? Дайте код створення  спрайту. "Будем розбиралися".

17 Востаннє редагувалося elektryk (27.11.2023 17:11:55)

Re: Малювання персонажів для браузерної забави

plusxx написав:

На чім пишете браузерку? Дайте код створення  спрайту. "Будем розбиралися".

Дякую за чуйність

код містить коменти мовою окупанта
// Размер игрового поля
const gridSize = 65;
// Создание игрового поля
function createGameGrid() {
  const gameGrid = [];
  for (let i = 0; i < gridSize; i++) {
    const row = [];
    for (let j = 0; j < gridSize; j++) {
      row.push("field");} // Изначально все клетки поля
        gameGrid.push(row);}
  return gameGrid;}

    // Генерация ландшафта
function generateLandscape(gameGrid) {
  const totalCells = gridSize * gridSize;
  const fieldCount = Math.floor((totalCells * 50) / 100);
  const sandCount = Math.floor((totalCells * 5) / 100);
  const forestCount = Math.floor((totalCells * 15) / 100);
  const mountainCount = Math.floor((totalCells * 10) / 100);  
  const cellTypes = [];
  for (let i = 0; i < fieldCount; i++) {
    cellTypes.push("field");}
  for (let i = 0; i < sandCount; i++) {
    cellTypes.push("sand");}  
  for (let i = 0; i < forestCount; i++) {
    cellTypes.push("forest");}
  for (let i = 0; i < mountainCount; i++) {
    cellTypes.push("mountain");}  
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      const randomIndex = Math.floor(Math.random() * cellTypes.length);
      gameGrid[i][j] = cellTypes[randomIndex];}}
    return gameGrid;}

// Генерация реки
function generateRiver(gameGrid) {
  const startRow = Math.floor(Math.random() * gridSize); // Стартовая позиция реки (случайная строка)
  const startCol = 0; // Начало реки на краю поля (первая колонка)
  const endRow = Math.floor(Math.random() * gridSize); // Конечная позиция реки (случайная строка)
  const endCol = gridSize - 1; // Конец реки на краю поля (последняя колонка)
  let row = startRow;
  let col = startCol;
  let waterCount = 0; // Счётчик клеток с водой
  while (row !== endRow || col !== endCol) {
    // Проверяем, является ли текущая клетка уже водой
    if (gameGrid[row][col] !== "water") {
      gameGrid[row][col] = "water"; // Устанавливаем текущую клетку как воду
      waterCount++;} // Увеличиваем счётчик клеток с водой
       // Проверяем, достигло ли количество клеток с водой заданного предела
    if (waterCount === 850) {
      break;} // Выходим из цикла   
    const directions = [
      { dx: 0, dy: -1 }, // Вверх
      { dx: 1, dy: 0 }, // Вправо
      { dx: 0, dy: 1 }, // Вниз
      { dx: -1, dy: 0 } // Влево
    ];
        // Выбираем случайное направление движения
    const randomDirection = directions[Math.floor(Math.random() * directions.length)];
    // Перемещаемся в выбранном направлении
    row += randomDirection.dy;
    col += randomDirection.dx;
    // Проверяем, чтобы не выходить за границы поля
    if (row < 0) {row = 0;} 
    else if (row >= gridSize) {
      row = gridSize - 1;}
        if (col < 0) {col = 0;} 
    else if (col >= gridSize) {
      col = gridSize - 1;}}
    return gameGrid;}
/*Отображение игрового поля*/
function renderGameGrid(gameGrid) {
  const container = document.getElementById("game-board");
  // Очищаем контейнер перед отображением игрового поля
  container.innerHTML = "";
    for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      const cell = document.createElement("div");
      cell.className = gameGrid[i][j] + " cell";
      container.appendChild(cell);}}}
// Создание игрового поля и генерация ландшафта
const gameGrid = createGameGrid();
generateLandscape(gameGrid);
// Генерация реки
generateRiver(gameGrid);
// Добавление внутреннего водяного обрамления
for (let i = 0; i < gridSize; i++) {
  for (let j = 0; j < 4; j++) {
    gameGrid[i][j] = "water";}}
for (let i = 0; i < gridSize; i++) {
  for (let j = 61; j < gridSize; j++) {
    gameGrid[i][j] = "water";}}
for (let i = 0; i < 4; i++) {
  for (let j = 0; j < gridSize; j++) {
    gameGrid[i][j] = "water";}}
for (let i = 61; i < gridSize; i++) {
  for (let j = 0; j < gridSize; j++) {
    gameGrid[i][j] = "water";}} 
let yz; // Объявляем переменную yz глобально 

// Размещение героя, казармы, лодки, дома друзей и дома героя
function placeHeroAndBuildings(gameGrid) {
  const minY = 10;
  const maxY = 55;
    // Выбираем случайное значение yz из диапазона
  yz = Math.floor(Math.random() * (maxY - minY + 1) + minY);
    // Выравнивание площадки под объектами
  for (let i = 58; i <= 60; i++) {
    for (let j = yz - 1; j <= yz + 1; j++) {
      gameGrid[i][j] = "field";}}
    // Размещение героя
  gameGrid[59][yz] = "hero";
    // Размещение казармы
  gameGrid[59][yz - 1] = "barracks";
    // Размещение дома друзей
  gameGrid[59][yz + 1] = "friendsHouse";
    // Размещение дома героя
  gameGrid[58][yz] = "heroHouse"; 
    // Размещение лодки героя
  gameGrid[61][yz] = "heroBoat";  
  return gameGrid;} 

// Вернуть символ или объект в данной позиции на вашем игровом поле (gameGrid)
function getMapChar(x, y) {return gameGrid[y][x];}          
    //[row] - строки, [col] - столбцы (колонки) 

// Объект, хранящий соответствие между типами ландшафта и картинками
const landscapeImages = {
  field: "landshaft/field.png",    // поле:
  sand: "landshaft/sand.png",     // песок:
  mountain: "landshaft/mountain.png", // гора:
  forest: "landshaft/forest.png",     // лес:
  water: "landshaft/water.png",     // вода:
  hero: "landshaft/hero.png",          // герой:
  barracks: "landshaft/barracks.png", // казармы:
  heroHouse: "landshaft/heroHouse.png",  // геройДом:
  heroBoat: "landshaft/heroBoat.png",  // геройЛодка:
  robber: "landshaft/robber.png",          // грабитель:
  evilCastle: "landshaft/evilCastle.png",  //  злой замок:
  friendsHouse: "landshaft/friendsHouse.png",// Дом друзей:
  fieldkaz: "landshaft/fieldkaz.png", // жилище воинов:  
  goldChest: "landshaft/goldChest.png", }; // сундук с золотом:
 
// Функция для получения пути к картинке по типу ландшафта
function getImagePath(landscapeType) {
  return landscapeImages[landscapeType];}

// Получение контейнера окна игры
const gameWindow = document.getElementById('game-window');

// Функция для создания элемента картинки и установки ему нужных свойств
function createImageElement(src) {
  const img = document.createElement('img');
  img.src = src;
  img.width = 96;
  img.height = 60;
  return img;} 
  
// Вернуть символ или объект в данной позиции на вашем игровом поле (gameGrid)
function getMapChar(x, y) {return gameGrid[x][y];}  

function getImageForObject(objectSymbol) {
    switch (objectSymbol) {
        case "field":
            return new Image("landshaft/field.png");
        case "sand":
            return new Image("landshaft/sand.png"); 
        case "mountain":
            return new Image("landshaft/mountain.png");
    case "forest":
      return new Image("landshaft/forest.png");
    case "water":
      return new Image("landshaft/water.png");
    case "hero":
      return new Image("landshaft/hero.png"); 
    case "barracks":
      return new Image("landshaft/barracks.png");
    case "heroHouse":
      return new Image("landshaft/heroHouse.png");
    case "heroBoat":
      return new Image("landshaft/heroBoat.png");
    case "robber":
      return new Image("landshaft/robber.png"); 
    case "evilCastle":
      return new Image("landshaft/evilCastle.png");
    case "fieldkaz":
      return new Image("landshaft/fieldkaz.png");
    case "friendsHouse":
      return new Image("landshaft/friendsHouse.png");
     case "goldChest":
      return new Image("landshaft/goldChest.png");
  default:
      return null;}}// Если символ не распознан, возвращаем null или другое значение по умолчанию.

// Функция для заполнения окна игры картинками ландшафта
function fillGameWindow(gameGrid) {
  // Очистка контейнера окна игры
  gameWindow.innerHTML = '';
  // Перебор всех ячеек окна игры
  for (let i = 57; i <= 61; i++) {
    for (let j = yz - 2; j <= yz + 2; j++) {
      // Получение типа ландшафта для текущей ячейки
      const landscapeType = gameGrid[i][j];
      // Получение путь к картинке для данного типа ландшафта
      const imagePath = getImagePath(landscapeType);      
      // Создание элемента картинки и установка ему пути к картинке
      const img = createImageElement(imagePath); 
      img.classList.add("game-image");
      // Добавление элемента картинки в контейнер окна игры
      gameWindow.appendChild(img);}}}
// Получите координаты центральной точки (позиции) на ландшафте
var centerX = 59; // Замените на соответствующее значение
var centerY = yz; // Замените на соответствующее значение
// Определите координаты верхнего левого угла фрагмента 5x5 относительно центральной точки
var startX = centerX - 2;
var startY = centerY - 2;
// Получите canvas и его контекст
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
// Размеры клетки и фрагмента
var cellSize = 96; // Используйте ваше значение
var fragmentSize = 5;
// Проходитесь по фрагменту 5x5 и рисуйте объекты
for (var y = 0; y < fragmentSize; y++) {
    for (var x = 0; x < fragmentSize; x++) {
        var posX = startX + x;
        var posY = startY + y;
        var objectSymbol = getMapChar(posX, posY);
        var image = getImageForObject(objectSymbol);
        if (image) {
            image.onload = function() {
                context.drawImage(image, x * cellSize, y * cellSize, cellSize, cellSize);};
            image.src = getImagePath(objectSymbol);}}}
console.log(centerX, yz);
    // Размещение героя, казармы, лодки, дома друзей и дома героя
    placeHeroAndBuildings(gameGrid); 
       // Отображение игрового поля
    renderGameGrid(gameGrid); 
    // Заполнение окна игры изображениями
    fillGameWindow(gameGrid, yz);
<!DOCTYPE html>
<html>
<head>
  <title>гра 2k</title>
  <style>
  .game-image {
  display: inline-block;
  gap: 0 px;
  margin: 0;
  padding: 0;}
  
    #game-board {
      width: 520px;
      height: 520px;
      display: flex;
      flex-wrap: wrap;
      gap: 0;}
    
    .cell {
      width: 8px;
      height: 8px;
      display: inline-block;
      margin: 0;
      padding: 0;}
            
.field {background-color: lightgreen;}
.sand {background-color: yellow;}
.mountain {background-color: brown;}
.forest {background-color: green;}    
.water {background-color: blue;} 
.hero {background-color: red;}
.barracks {background-color: red;}
.friendsHouse {background-color: red;}
.heroHouse {background-color: red;}
.heroBoat {background-color: red;} 
.robber {background-color: gray;} 
.evilCastle {background-color: black;} 
.goldChest {background-color: gold;}
.warriorHousing {background-color: cyan;} 
    #game-window {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0 px;
  width: 480px; 
  height: 300px;
  border: 1px solid black;
  padding: 5px;}

  </style>
</head>
<body>
  <div id="game-board"></div>
  <div id="game-window"></div>
  <div >
        <canvas id="gameCanvas" width="480" height="300"></canvas>
        </div>
<script src="Gra 2k.js" charset="UTF-8"></script>

</body>
</html>

18

Re: Малювання персонажів для браузерної забави

пачіму камєнтарі в коді па расєйскі? )
і нащо там var?
код тоже крадений?

19

Re: Малювання персонажів для браузерної забави

mikeos написав:

пачіму камєнтарі в коді па расєйскі? )
і нащо там var?
код тоже крадений?

Ги-ги-ги-ги!!
Ні, код не крадений.
Це ми разом зі штучним інтелектом зробили...

20

Re: Малювання персонажів для браузерної забави

Прихований текст

Дебелий вуйко спритним рухом вибиває табуретку, і ШІ повисає на гіляці, кумедно дриґаючи дротами.
— Так буде з кожним москалем!
Ватага бійців радісно реве, кидаючи вгору диванні подушки. Чудова робота, агенте Е.! Виявити ворога в нетрях мереж, задавши йому декілька простих запитань, зібрати всі докази проти нього й передати побратимам — справа важлива й необхідна у наш час.

Подякували: Tarpan871