diff options
Diffstat (limited to 'files/ru/games/techniques')
4 files changed, 23 insertions, 23 deletions
diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index 7f07e08d93..1df6408271 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -66,7 +66,7 @@ renderer.setClearColor(0xDDDDDD, 1); document.body.appendChild(renderer.domElement); </pre> -<p>Создаем новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - черный).</p> +<p>Создаём новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - чёрный).</p> <p>Добавьте этот код в ваш элемент {{htmlelement("script")}}.</p> @@ -81,7 +81,7 @@ document.body.appendChild(renderer.domElement); <h2 id="Камера">Камера</h2> -<p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим ее позицию в координатной системе и направим ее на нужную нам точку, где расположено то, что мы хотим видеть:</p> +<p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:</p> <pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); camera.position.z = 50; @@ -90,7 +90,7 @@ scene.add(camera); <p>Добавьте следующий код в программу.</p> -<p>Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать ее, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:</p> +<p>Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать её, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:</p> <ul> <li>Мы установили поле зрения в 70, с этим можно поэкспериментировать: чем больше число, тем больше угол обзора, тем шире мы видим. Представьте обычную камеру и камеру с эффектом fish eye, Которая позволяет увидеть больше. Значение по умолчанию 50.</li> @@ -115,9 +115,9 @@ scene.add(camera); render(); </pre> -<p>На каждом новом кадре вызывается функция <code>render()</code>, а <code>renderer</code> рендерит <code>scene</code> и <code>camera</code>. Сразу после объявления функции мы в первый раз вызываем ее, чтобы запустить цикл, после чего он будет использоваться бесконечно.</p> +<p>На каждом новом кадре вызывается функция <code>render()</code>, а <code>renderer</code> рендерит <code>scene</code> и <code>camera</code>. Сразу после объявления функции мы в первый раз вызываем её, чтобы запустить цикл, после чего он будет использоваться бесконечно.</p> -<p>Еще раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!</p> +<p>Ещё раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!</p> <h2 id="Geometry">Geometry</h2> @@ -155,7 +155,7 @@ render(); <pre class="brush: js notranslate">scene.add(cube); </pre> -<p>Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернем его, чтобы видеть больше сторон. Добавить в конец кода эту строку:</p> +<p>Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон. Добавить в конец кода эту строку:</p> <pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0); </pre> @@ -217,7 +217,7 @@ scene.add(light); <h2 id="Анимация">Анимация</h2> -<p>Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесенные изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.</p> +<p>Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесённые изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.</p> <h3 id="Вращение">Вращение</h3> diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html index 9121cc00e2..7b7c6dc59e 100644 --- a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html +++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html @@ -131,7 +131,7 @@ translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders <pre class="brush: js">// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); </pre> -<p>Далее, создаем <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a>:</p> +<p>Далее, создаём <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a>:</p> <pre class="brush: js">var shaderMaterial = new THREE.ShaderMaterial( { vertexShader: document.getElementById( 'vertexShader' ).textContent, diff --git a/files/ru/games/techniques/async_scripts/index.html b/files/ru/games/techniques/async_scripts/index.html index 914600cd94..2f50c87da4 100644 --- a/files/ru/games/techniques/async_scripts/index.html +++ b/files/ru/games/techniques/async_scripts/index.html @@ -24,11 +24,11 @@ translation_of: Games/Techniques/Async_scripts script.src = "file.js"; document.body.appendChild(script);</code></pre> -<p><font><font>(скрипты создаются из скрипта по умолчанию </font></font><code>async</code><font><font>.) Стандартная оболочка HTML, которую генерирует Emscripten, создает последнее.</font></font></p> +<p><font><font>(скрипты создаются из скрипта по умолчанию </font></font><code>async</code><font><font>.) Стандартная оболочка HTML, которую генерирует Emscripten, создаёт последнее.</font></font></p> <h2 id="Когда_асинхронный_не_асинхронный"><font><font>Когда асинхронный не асинхронный?</font></font></h2> -<p><font><font>Две распространенные ситуации, в которых сценарий * не * асинхронен (как </font></font><a href="http://www.w3.org/TR/html5/scripting-1.html"><font><font>определено спецификацией HTML</font></font></a><font><font> ):</font></font></p> +<p><font><font>Две распространённые ситуации, в которых сценарий * не * асинхронен (как </font></font><a href="http://www.w3.org/TR/html5/scripting-1.html"><font><font>определено спецификацией HTML</font></font></a><font><font> ):</font></font></p> <pre><code><script async>code</script></code></pre> diff --git a/files/ru/games/techniques/controls_gamepad_api/index.html b/files/ru/games/techniques/controls_gamepad_api/index.html index 512f3143d4..6f84031d8d 100644 --- a/files/ru/games/techniques/controls_gamepad_api/index.html +++ b/files/ru/games/techniques/controls_gamepad_api/index.html @@ -17,13 +17,13 @@ translation_of: Games/Techniques/Controls_Gamepad_API <h2 id="Элементы_управления_для_web_игр">Элементы управления для web игр</h2> -<p>Исторически игра на консоли, подключенной к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который дает нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.</p> +<p>Исторически игра на консоли, подключённой к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который даёт нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.</p> <p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p> <h2 id="API_статус_и_поддержка_браузера">API статус и поддержка браузера</h2> -<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> все еще находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все еще может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.</p> +<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> все ещё находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все ещё может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.</p> <h2 id="Какие_геймпады_лучше_всего">Какие геймпады лучше всего?</h2> @@ -37,11 +37,11 @@ translation_of: Games/Techniques/Controls_Gamepad_API <p>The competition ran in November 2013 and decided to take part in it. The theme for the competition was "change", so they submitted a game where you have to feed the Hungry Fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) A countdown changes the type of food the Fridge wants to eat every few seconds, so you have to be careful and act quickly. You can <a href="http://enclavegames.com/games/hungry-fridge/">try Hungry Fridge here</a>.</p> -<p>Конкурс <a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a> состоялся в ноябре 2013 года, и <a href="http://enclavegames.com/">Enclave Games</a> решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчет меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник <a href="http://enclavegames.com/games/hungry-fridge/">здесь</a>.</p> +<p>Конкурс <a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a> состоялся в ноябре 2013 года, и <a href="http://enclavegames.com/">Enclave Games</a> решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчёт меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник <a href="http://enclavegames.com/games/hungry-fridge/">здесь</a>.</p> <p><img alt="hungryfridge-mainmenu" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img02.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> -<p>Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все еще должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.</p> +<p>Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все ещё должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.</p> <p><img alt="hungryfridge-howtoplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img03.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> @@ -63,7 +63,7 @@ translation_of: Games/Techniques/Controls_Gamepad_API <h2 id="Реализация">Реализация</h2> -<p>Есть два важных события, которые можно использовать вместе с API Gamepad-<code>gamepadconnected </code>и <code>gamepaddisconnected</code>. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключен (либо физически пользователем, либо из-за бездействия).) В демо-версии объект <code>gamepadAPI </code>используется для хранения всего, что связано с API:</p> +<p>Есть два важных события, которые можно использовать вместе с API Gamepad-<code>gamepadconnected </code>и <code>gamepaddisconnected</code>. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключён (либо физически пользователем, либо из-за бездействия).) В демо-версии объект <code>gamepadAPI </code>используется для хранения всего, что связано с API:</p> <pre class="brush: js"><code>var gamepadAPI = { controller: {}, @@ -118,11 +118,11 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Объект_геймпада">Объект геймпада</h3> -<p>В объекте <code>gamepad </code>содержится много полезной информации, причем наиболее важными являются состояния кнопок и осей:</p> +<p>В объекте <code>gamepad </code>содержится много полезной информации, причём наиболее важными являются состояния кнопок и осей:</p> <ul> <li><code>id</code>: Строка, содержащая информацию о контроллере.</li> - <li><code>index</code>: Уникальный идентификатор для подключенного устройства.</li> + <li><code>index</code>: Уникальный идентификатор для подключённого устройства.</li> <li><code>connected</code>: Логическая переменная. Возвращает <code>true</code> при подключении.</li> <li><code>mapping</code>: Тип компоновки кнопок; Стандартный - единственный доступный вариант на данный момент.</li> <li><code>axes</code>: Состояние каждой оси, представленное массивом значений с плавающей запятой.</li> @@ -133,7 +133,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Запрос_объекта_геймпада">Запрос объекта геймпада</h3> -<p>Помимо <code>connect()</code> и <code>disconnect()</code>, в объекте <code>gamepadAPI </code>есть еще два метода: <code>update()</code> и <code>buttonPressed()</code>. <code>update() </code>выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:</p> +<p>Помимо <code>connect()</code> и <code>disconnect()</code>, в объекте <code>gamepadAPI </code>есть ещё два метода: <code>update()</code> и <code>buttonPressed()</code>. <code>update() </code>выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:</p> <pre class="brush: js"><code>update: function() { // clear the buttons cache @@ -175,7 +175,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Обнаружение_нажатия_кнопок">Обнаружение нажатия кнопок</h3> -<p>Метод <code>buttonPressed()</code> также помещается в основной игровой цикл для обработки нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придется отпустить кнопку и нажать ее снова, чтобы получить желаемый эффект.</p> +<p>Метод <code>buttonPressed()</code> также помещается в основной игровой цикл для обработки нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придётся отпустить кнопку и нажать её снова, чтобы получить желаемый эффект.</p> <pre class="brush: js"><code>buttonPressed: function(button, hold) { var newPress = false; @@ -213,7 +213,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> }</code> </pre> -<p>Если <code>gamepadAPI.turbo</code> возвращает <code>true</code>, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведет к выстрелу пули, а нажатие "B" поставит игру на паузу.</p> +<p>Если <code>gamepadAPI.turbo</code> возвращает <code>true</code>, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведёт к выстрелу пули, а нажатие "B" поставит игру на паузу.</p> <h3 id="Порог_оси">Порог оси</h3> @@ -229,7 +229,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> }</code> </pre> -<p>Даже если мы немного сдвинем его по ошибке или стик не вернется в исходное положение, танк не повернется неожиданно.</p> +<p>Даже если мы немного сдвинем его по ошибке или стик не вернётся в исходное положение, танк не повернётся неожиданно.</p> <h2 id="Обновление_спецификаций">Обновление спецификаций</h2> @@ -237,7 +237,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Получение_геймпадов">Получение геймпадов</h3> -<p>Метод {{domxref ("Navigator.getGamepads ()")}} был обновлен с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть <code>n+1</code>, где <code>n</code>-количество подключенных устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: <code>[null, [object Gamepad]]</code>. Если устройство отключено или недоступно, то для него устанавливается значение <code>null</code>.</p> +<p>Метод {{domxref ("Navigator.getGamepads ()")}} был обновлён с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть <code>n+1</code>, где <code>n</code>-количество подключённых устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: <code>[null, [object Gamepad]]</code>. Если устройство отключено или недоступно, то для него устанавливается значение <code>null</code>.</p> <h3 id="Стандартное_отображение">Стандартное отображение</h3> @@ -257,4 +257,4 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h2 id="Подведение_итогов">Подведение итогов</h2> -<p>API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить ее из <a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> или проверить исходный код демо-версии вместе со всеми другими ресурсами в <a href="https://github.com/EnclaveGames/Hungry-Fridge">комплекте контента Gamepad API</a>.</p> +<p>API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить её из <a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> или проверить исходный код демо-версии вместе со всеми другими ресурсами в <a href="https://github.com/EnclaveGames/Hungry-Fridge">комплекте контента Gamepad API</a>.</p> |