Создание игры без движка и с движком

Страница 1 из 7 1, 2, 3, 4, 5, 6, 7  Следующий

Перейти вниз

Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 8:42 pm

Расскажите мне как создавать игру с движком и без движка.

Я понимаю, что движок-это библиотека, набор команд. Но мне нужен пример. Не хотел я втягиваться снова в процесс обучения сейчас, но, видимо, у меня нет выбора, надо успевать всё. В общем, как это было с pointjs:

Спойлер:

Код:
var pjs = new PointJS('2D', 400, 400);

pjs.system.initFullPage(); // режим на весь экран
http://pjs.system.initFullScreen(); // for Full Screen mode (only Desctop)

//////////////////
var game    = pjs.game;
var key     = pjs.keyControl;
var mouse   = pjs.mouseControl;
var colors  = pjs.colors;
var log     = sys.log;
var stop    = game.stop;
var tiles   = pjs.tiles;
var OOP     = pjs.OOP;
var v2d     = vector.v2d;
var v2f     = vector.v2d;
var log    = pjs.system.log;     // log = console.log;
var point  = vector.point;   // Constructor for Point
var size   = vector.size;
var camera = pjs.camera;         // Camera Manager
var OOP    = pjs.OOP;            // Object's manager
var levels = pjs.levels;         // Levels manager

 var height = game.getWH().h;
 var width = game.getWH().w;

var key   = pjs.keyControl.initKeyControl();
var touch = pjs.touchControl;
touch.initTouchControl();

pjs.system.setTitle('PointJS Game'); // Set Title for Tab or Window

var fon1 = game.newImageObject({
 x:0, y:0,
 file: "back.jpg",
 h: height
});

var kenTile = pjs.tiles.newImage("ken.png");
var kenAnim = {
 ken : kenTile.getAnimation(0,77,66,84,4), // ХОДИТ
 kenfist : kenTile.getAnimation(0,160,70,80,3) // УДАР КУЛАКОМ
};
var ken = game.newAnimationObject({
 animation : kenAnim.ken,
 delay: 10,
 x:width/2, y: 0,
    h: 80, w: 90,
userData : { dy : 0 }
});

var kenfist = game.newAnimationObject({
 animation : kenAnim.kenfist,
 delay: 10,
 x:width/3, y: 0,
    h: 80, w: 90
});

var moveBackGround = function (s) {
 fon1.move(point( -s/6, 0));
 
 if (fon1.x+fon1.w < 0) {
 fon1.x=fon1.w;
 }
 
};
var speed = 2;
var speed1 = 2;
// Game Loop
game.newLoop('game', function (){

game.fill("#d9d9d9"); //seriy fon
 
///////////////// MOVE FUNCTION

 var move = function () {


 if (key.isDown('LEFT')){
 ken.setFlip (1,0);
 ken.move(point(-speed,0));
 }
 
 if (key.isDown('RIGHT')){
 ken.setFlip (0,0);
 ken.move(point(speed,0));
        ken.draw();
 }
 
    move();
    ken.move(point(ken.dx,ken.dy));
 fon1.draw();
 ken1.y = gr1.y - ken1.h/3; // КООРДИНАТЫ ВТОРОГО ИГРОКА
 ken.draw();                // ПРОРИСОВКА КЕН ХОДИТ
   kenfist.draw();
 moveBackGround (5);
});

game.startLoop('game');

Вряд ли код рабочий, потому что я прямо сейчас удалял лишнее и мог переусердствовать. Это для примера, создавался фон, который двигался и на фоне стоял игрок, мог двигаться вправо, влево.

Вот игрок и фон
https://yadi.sk/i/PvP30fFf3QwabV
https://yadi.sk/i/_Lx0ZfOT3Qwanx



Как теперь всё это сделать без pointjs?
И как потом написать свой движок для такой игры?
Буду очень признателен за такое обучение.

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор raingo в Пн Дек 25, 2017 8:46 pm

я даже пробовать объяснять не буду. это слишком сложно.

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор raingo в Пн Дек 25, 2017 8:48 pm

гм.. это совсем сложно, правда. У меня есть некоторые опыт. Но ведь и я не осилил. Да и сканнер кучу времени на поинт.жс потратил.

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор raingo в Пн Дек 25, 2017 8:51 pm

тебе нужно выбрать один из движков исходя из предпочтений. Без движка никуда.

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 8:54 pm

ну вот смотри например. invaders338 ты видел. а вот например тоже самое, только без движка https://pyro338.ru/space-invaders/old.html

смысл в том, что движок в основном принимает на себя функции отрисовки. если ты умеешь отрисовывать в канвасе что тебе нужно, то и без движка не составит труда свою игру написать. функции движения и вот этого вот всего будут идентичными что с движком, что без движка

Код:
log = function(logged){
  console.log(logged);
}

var Game = function(canvasId){
  var canvas = document.getElementById(canvasId);
  var screen = canvas.getContext('2d');
  var gameSize = {
    x: canvas.width,
    y: canvas.height,
  };
  this.bodies = createInvaders(this).concat([new Player(this, gameSize)]);
  var self = this;
  loadSound('shoot.wav', function(shootSound){
    self.shootSound = shootSound;
    var tick = function(){
      self.update(gameSize);
      self.draw(screen, gameSize);
      requestAnimationFrame(tick);
    }
    tick();
  })
}

Game.prototype = {
  update: function(gameSize){
    var bodies = this.bodies;
    var nonCollidingWithAnything = function(b1){
      return bodies.filter(function(b2){
        return colliding(b1, b2);
      }).length == 0;
    }
    this.bodies = this.bodies.filter(nonCollidingWithAnything);
    for(var i = 0; i < this.bodies.length; i++){
      if(this.bodies[i].position.y <0){
        this.bodies.splice(i, 1);
      }
    }
    for(var i = 0; i < this.bodies.length; i++){
      this.bodies[i].update();
    }
  },
  draw: function(screen, gameSize){
    clearCanvas(screen, gameSize);
    for(var i = 0; i < this.bodies.length; i++){
      drawRect(screen, this.bodies[i]);
    }
  },
  addBody: function(body){
    this.bodies.push(body);
  },
  invadersBelow: function(invader){
    return this.bodies.filter(function(b){
      return b instanceof Invader && b.position.y > invader.position.y && b.position.x - invader.position.x < invader.size.width;
    }).length > 0;
  }
}

var Invader = function(game, position, gameSize){
  this.game = game;
  this.gameSize = gameSize;
  this.size = {
    width: 16,
    height: 16
  }
  this.position = position;
  this.patrolX = 0;
  this.speedX = 0.8;
}

Invader.prototype = {
  update: function(){
    if(this.patrolX < 0 || this.patrolX > 500){
      this.speedX = -this.speedX;
    }
    this.position.x += this.speedX;
    this.patrolX += this.speedX;
    if(Math.random() < 0.01 && !this.game.invadersBelow(this)){
      var bullet = new Bullet({x: this.position.x + this.size.width/2-1, y: this.position.y+this.size.height/2}, {x: Math.random()-0.5, y: +2,});
      this.game.addBody(bullet);
    }
  }
}

var Player = function(game, gameSize){
  this.game = game;
  this.bullets = 0;
  this.timer = 0;
  this.size = {
    width: 16,
    height: 16,
  };
  this.position = {
    x: gameSize.x/2-this.size.width/2,
    y: gameSize.y-50,
  };
  this.keyboarder = new Keyboarder;
  this.gameSize = gameSize;
}

Player.prototype = {
  update: function(){
    if(this.keyboarder.isDown(this.keyboarder.KEYS.LEFT)){
      if(this.position.x > 0){
        this.position.x -= 2;
      }
    }
    if(this.keyboarder.isDown(this.keyboarder.KEYS.RIGHT)){
      if(this.position.x < this.gameSize.x-this.size.width){
        this.position.x += 2;
      }
    }
    if(this.keyboarder.isDown(this.keyboarder.KEYS.SPACE)){
      if(this.bullets <=5){
        var bullet = new Bullet({x: this.position.x + this.size.width/2-1, y: this.position.y-4}, {x: 0, y: -6,});
        this.game.addBody(bullet);
        this.bullets++;
        this.game.shootSound.load();
        http://this.game.shootSound.play();
      }
    }
    this.timer++;
    if(this.timer % 12 ==0){
      this.bullets = 0;
    }
  }
}

var Bullet = function(position, velocity){
  this.size = {
    width: 2,
    height: 3,
  };
  this.position = position;
  this.velocity = velocity;
}

Bullet.prototype = {
  update: function(){
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
  }
}

var Keyboarder = function(){
  var KeyState = {

  }
  window.onkeydown = function(e){
    KeyState[e.keyCode] = true;
  }
  window.onkeyup = function(e){
    KeyState[e.keyCode] = false;
  }
  this.isDown = function(keyCode){
    return KeyState[keyCode];
  }
  this.KEYS = {
    LEFT: 37,
    RIGHT: 39,
    SPACE: 32,
  }
}

var createInvaders = function(game){
  var invaders = [];
  for(var i = 0; i < 24; i++){
    var x = 30 + (i % 8) * 30;
    var y = 30 + (i % 3) * 30;
    invaders.push(new Invader(game, {x: x, y: y}));
  }
  return invaders;
}

var colliding = function(b1, b2){
  return !(b1 == b2 ||
    b1.position.x+b1.size.width/2 < b2.position.x-b2.size.width/2 ||
    b1.position.y+b1.size.height/2 < b2.position.y-b2.size.height/2 ||
    b1.position.x-b1.size.width/2 > b2.position.x+b2.size.width/2 ||
    b1.position.y-b1.size.height/2 > b2.position.y+b2.size.height/2
  );
}

var loadSound = function(url, callback){
  var loaded = function(){
    callback(sound);
    sound.removeEventListener('canplaythrough', loaded);
  }
  var sound = new Audio(url);
  sound.addEventListener('canplaythrough', loaded);
  sound.load();
}

var drawRect = function(screen, body){
  screen.fillRect(body.position.x, body.position.y, body.size.width, body.size.height);
}

var clearCanvas = function(screen, gameSize){
  screen.clearRect(0, 0, gameSize.x, gameSize.y);
}

window.onload = function(){
  new Game('screen');
}
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 8:56 pm

raingo пишет:тебе нужно выбрать один из движков исходя из предпочтений. Без движка никуда.

можно и без движка. но сложнее
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:03 pm

Илья, я не прошу писать движок на все случаи жизни, я прошу написать движок на несколько движений.

Антон, спасибо, стало понятней, про канвас я уже читал.

Парни,а можете взять мой тайлшит или любой другой , поставить фон, отрисовать перса и сделать его движение вправо/влево без движка. Мне кажется это займёт минут 20 . Если будет 2 варианта - я буду вообще счастлив.

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 9:04 pm

друг) ты же понимаешь, что за тебя твой код писать никто не будет))
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:05 pm

Вот сначала причём и где создавать всё это в html или js подключать или прямо в html писать. Вот полностью что куда и зачем. Чтоб я скопировал, вставил куда надо и всё работало. Не надо там ничего сложного, вот просто вправо/влево движение

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:08 pm

а там что много писать?дай свой тайл где есть анимация вправо/влево или две другие и свой код с началом кода и реализацией движения вправо/влево или другие движения, чтоб скопировать, вставить и наглядно видеть работу

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 9:09 pm

в хтмл просто один канвас рисуешь и потом к нему по id обращаешься

Код:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Space invaders</title>
  <script type="text/javascript" src="bin/game.js"></script>
</head>
<body>
  <canvas width="800" height="450" id="screen"></canvas>
</body>
</html>
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор raingo в Пн Дек 25, 2017 9:10 pm

вроде у сканера были уроки создания игр без point.js?

Сто проц были. ща кину ссылку.

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:10 pm

Отлично,с этим никаких вопросов, а в game.js что?

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 9:11 pm

вот я тебе готовый код с движениями вправо/влево. как отрисовывать тайлы на чистом канвасе - я не знаю. только прямоугольники могу.
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 9:12 pm

в game.js - код который начинается с log = function(logged){
console.log(logged);
}
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор raingo в Пн Дек 25, 2017 9:12 pm


raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:16 pm

Действительно были...ну, всё равно, взять бы игру без движка и такую же игру с движком и посмотреть разницу - вот это было бы супер. Не надо там ничего сложного, картинка фона, перса и пару движений

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 9:18 pm

вот та же самая игра с движком https://pyro338.ru/space-invaders/ и без движка https://pyro338.ru/space-invaders/old.html
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:20 pm

Да, я про код))А не разницу во внешнем виде

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 9:21 pm

код практически одинаковый за исключением функций отрисовки
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор raingo в Пн Дек 25, 2017 9:23 pm

А еще главный цикл, низкоуровневые функции отрисовки, получение инфы от клавиатуры.

В этом плеер-листе вроде есть инфа, как делать подобное.

Кстати, Дессан, попоробуй зайти в соседнюю ветку (внутренний цензор) и поругаться матом)

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:23 pm

А что картинки нельзя вставлять?

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:23 pm

тайлы точнее

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Pyro338 в Пн Дек 25, 2017 9:24 pm

можно, но я не знаю как. не задавался этим вопросом
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 33
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Dessan в Пн Дек 25, 2017 9:26 pm

А ты все игры делал на pointjs?

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Создание игры без движка и с движком

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Страница 1 из 7 1, 2, 3, 4, 5, 6, 7  Следующий

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения