Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > разработка игр, графический дизайн и моделирование > Gamedev - cоздание игр: Unity, OpenGL, DirectX
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.11.2017, 20:26   #751
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Цитата:
Сообщение от -=DeS=- Посмотреть сообщение
В этом уроке я научу вас как можно передвигать обьекты по форме с помощью клавиш...
--------------------------
Начнём.
1)Создайте новый проект File> New> Application
2)Теперь киньте на форму объект TShape
3)После этого выбираем в Object TreeView форму (Form1)
4)В Object inspector на вкладке Events ищем свойство OnKeyDown и щёлкаем на него 2 раза.
5)В созданной процедуре пишем код (я рекомендую вам не просто копировать а понять как это работает!)

Этот код будет двигат фигуру Shape1 на 2 пиксела вверх!
---------------------------
Попробуйте сами написать движение вниз, вправо, влево...
Позже и это будет показано!
Переведу этот урок на JavaScript и Three.js

Передвижение объекта по окну браузера с помощью клавиш-стрелок и клавиш WASD
--------------------------
1) Создайте новый проект на https://codepen.io/ или https://jsfiddle.net/ Здесь есть отдельные поля для ввода кода на HTML, CSS и JavaScript
2) Наберите в поисковике: cdn three.js, чтобы найти актуальную ссылку на three.js, например, следующего вида:
Код:
https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js
3) Вставьте эту ссылку в тег <script> в HTML поле, чтобы подключить библиотеку three.js:
Код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
4) Вставьте следующий код в CSS поле. Он нужен, чтобы убрать отступы от краёв у <body> (margin: 0; - поумолчанию margin равен 8 пикселей), и чтобы растянуть элемент <canvas> на весь экран браузера (width: 100%, height: 100%), а так же чтобы скрыть появление полос прокрутки браузера (overflow: hidden)
Код:
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
5) В поле для JavaScript кода пишем следующий код. Здесь создаётся три объекта: камера, сцена и отрисовщик, которые должны присутствовать во всех программах с three.js. Так же в программе создаётся куб. Этот куб движется вверх клавишами: стрелка-вверх, и клавишей W. Пробел возвращает куб на исходную позицию (0, 0, 0)
Код:

window.onload = init;

function init()
{
    // Create renderer
    // Создаём рисовальщик
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create Camera
    // Создаём камеру
    var FIELD_OF_VIEW = 50;
    var ASPECT_RATIO = window.innerWidth / window.innerHeight;
    var NEAR_CLIPPING_PLANE = 0.1;
    var FAR_CLIPPING_PLANE = 1000;
    var camera = new THREE.PerspectiveCamera(
        FIELD_OF_VIEW, ASPECT_RATIO, NEAR_CLIPPING_PLANE, FAR_CLIPPING_PLANE);

    // Отодвигаем камеру от центра по оси Z
    // (в Three.js правая правая система координат)
    camera.position.z = 5;

    // Create scene for 3D Objects
    // Создаём сцену для 3D объектов
    var scene = new THREE.Scene();

    // Create a cube
    // Создаём кубик
    var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    // Add the cube to a scene
    // Добавляем этот кубик на сцену
    scene.add(cube);

    // Game logic
    // Игровая логика
    var update = function ()
    {

    };

    // Draw scene
    // Нарисовать сцену
    var render = function ()
    {
        renderer.render(scene, camera);
    };

    // Game loop: update -> render -> repeat
    // Игровой цикл: обновить -> нарисовать -> повторить
    var gameLoop = function ()
    {
        update();
        render();
        requestAnimationFrame(gameLoop);
    };

    var xSpeed = 0.1;
    var ySpeed = 0.1;

    document.addEventListener("keydown", onDocumentKeyDown, false);
    function onDocumentKeyDown(event)
    {
        var keyCode = event.which;
        if (keyCode == 87 || keyCode == 38)
        {
            cube.position.y += ySpeed;
        }
        // if (keyCode == 65 || keyCode == 37)
        // {
        //     cube.position.x -= xSpeed;
        // }
        // Клавиша Пробел возвращает куб на исходную позицию (0, 0, 0)
        // Space returns to the position (0, 0, 0)
        else if (keyCode == 32)
        {
            cube.position.set(0, 0, 0);
        }
        render();
    }

    window.addEventListener("resize", onWindowResize, false);

    function onWindowResize()
    {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    gameLoop();
}
Весь код урока, который двигает куб вверх клавишами: стрелка-вверх, и клавишей W. Пробел возвращает куб на исходную позицию (0, 0, 0) https://jsfiddle.net/8Observer8/bqg03bzL/2/
---------------------------
Попробуйте сами написать движение вниз, вправо, влево...
Позже и это будет показано!

Последний раз редактировалось 8Observer8; 14.11.2017 в 20:30.
8Observer8 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Хорошие уроки Render Общие вопросы Delphi 9 15.09.2012 07:13
Акцесс вопросы новичков Yaga Помощь студентам 4 02.06.2008 00:16
Учебники для новичков в програмировании Рар Общие вопросы Delphi 6 08.01.2007 08:07