Вобщем сейчас потихоньку учу PHP и всё тому подобное и очень заинтересовался разработкой браузерных онлайн игр и нашёл довольна таки полезный и интересный материал :
Создание Браузерной Онлайн игры :
Очень часто встречаю темы в которых спрашиваеться как сделать браузерную игру, так вот решил написать небольшое пособие с чего начать таким новичкам.
1) Для начала нужно очень много терпения и твердого решения идти до победного конца. Иначе все оборачиваеться тем что сделали регистрацию и форму входа, на этом и закончилась игра. Также не помешает команда, но это уже как получиться.
2) Нужно иметь неплохие знания в таких скриптовых языках:
- php
- html
- css
- javascript
- MySQL
- AS3 (Flash)
3) Литература:
В интернете очень много разной литературы по приведенным выше скриптовых языках, используйте какая вам нравиться
Но я все таки посоветую те книги по которым сам учился:
PHP:
А. Кухарчик Обучение на примерах
PHP для чайников
html, css:
http://www.htmlbook.ru/
java script:
javascript.ru
MySQL:
Самоучитель MySQL 5
AS3:
demiart.ru
easyflash.org
ActionScript 3.0 для Flash. Подробное руководство. Колин Мук
ActionScript 3.0 Сборник рецептов. Джои Лотт. Деррон Шалл. Кейт Питерс
4) Также вам нужно определиться что именно вы хотите сделать, описать все аспекты вашей игры, расписать подробное Техническое задание для себя и если вы делаете командой, то и для остальных. И можете приступать
Но это только малая часть того что нужно, все остальное прибудет с опытом ( надеюсь )
Успехов в нашем нелегком деле
-----------------------------------------------------------------------------------------------------
Урок по созданию браузерной игры № 1
Появилась такая идея как создать курс по теме: «Создание браузерной флеш игры». В этом курсе будет описываться главные аспекты игры, также, надеюсь, под конец курса многие поймут как делаються такие игры. Может возьмут этот курс за основу для своей будущей игры. Все уроки которые будут здесь написаны, будут максимально прокоментированы, если что то не понятно, то задавайте вопросы сразу в той теме в которой написан урок.
Что понадобиться:
PSPad – программа для написания php скриптов ( можно и другие, но я пользуюсь этой и привык к ней ).
FlashDevelop – для написания флеш модулей ( далее буду писать его сокращенно FD)
xampp — сборка веб-сервера ( будем тестировать наши скрипты )
Так как я не очень хорошо рисую, все картинки буду брать из конструктора RPG Maker.
Думаю с программами определились, перейдем к описанию уроков.
Уроки:
1. Урок № 1 Обсуждение игры. Создание БД (MySQL)
2. Урок № 2 Создание формы входа и I этап регистрации (php, html, MySQL,css)
3. Урок № 3 II этап регистрации (php, FD, MySQL)(в разработке)
4. Урок № 4 Игровое окно. Техническое описание чата (php, FD, MySQL)(в разработке)
5. Урок № 5 Создание чата (php, FD, MySQL)(в разработке)
6. Урок № 6 Создание характеристик чара (php, FD, MySQL)(в разработке)
7. Урок № 7 Техническое описание инвентаря(в разработке)
8. Урок № 8 Создание инвентаря (php, FD, MySQL)(в разработке)
9. Урок № 9 Игровое поле (php, FD, MySQL)(в разработке)
10. Урок № 10 Создание обьектов на игровом поле (php, FD, MySQL)(в разработке)
11. Урок № 11 Создание квеста (php, FD, MySQL)(в разработке)
12. Урок № 12 Техническое описание модуля боя(в разработке)
13. Урок № 13 Создание модуля боя (php, FD, MySQL)(в разработке)
14. Урок № 14 Создание системы прокачки героя (php, FD, MySQL)(в разработке)
15. Урок № 15 Подведем итоги(в разработке)
Вот такой перечень уроков. Уроки буду писать основываясь на собственном опыте, ни в каких книгах вы их не найдете, так что и не думайте что я с какой то книжки все это переписываю. Думаю по одному уроку в день писать, но как вы знаете теория и практика совершенно разные вещи, так что тогда извеняйте и ждите happy
В каждом уроке буду все детально расписывать, ведь курс расчитан на новичков, людей еще не опытных в сфере создания игр.
База данных
Итак начнем с сердца игры, ее Базы Данных (далее БД). Для чего она нужна? В ней будут храниться все данные, такие как: характеристики персонажа, сообщения в чате, какие предметы находяться в инвентаре и т.д. Мы будем пользоваться БД MySQL, так как она очень хорошо подходит для наших php скриптов. БД хранит в себе таблицы, в каждой таблице находяться столбцы, например таблица «users» имеет 3 столбца: “login”, “pass”, “email”. Думаю с этим разобрались.
У нас будет 7 таблиц:
users – хранит все характеристики игрока
avatar – хранит вид персонажа
chat – хранит сообщения чата
inventar – отображает какие вещи в инвентаре
quest – хранит данные о квесте
battle – хранит данные о боях
enemy – хранит данные о врагах
В дальнейшем БД может дополниться. Теперь рассмотрим каждую таблицу отдельно.
В таблице users будем хранить такие данные:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>id_user – уникальный номер персонажа
email — email игрока, по нему будет осуществляться вход в игру
pass - пароль
name — имя игрока, будет отображаться в самой игре и в чате
life – жизни персонажа
atk — значение атаки
def - значение защиты
lov – значение ловкости
lvl – уровень игрока
exp – опыт игрока
В таблице avatar такие данные:
id_ava – уникальный номер аватарки
gander – какого пола персонаж
vid – какой вид у персонажа
path – путь к папке с картинками персонажа
В таблице chat такие данные:
id_msg – уникальный номер сообщения
msg – сообщение
time_msg – время когда было написано сообщение
wrt_user – кто написал
who – кому написали
В таблице inventar такие данные:
id_inv – уникальный номер вещи
name_object – название вещи
atk_up – сколько добавляет к атаке
def_up - сколько добавляет к защите
lov_up - сколько добавляет к ловкости
life_up - сколько добавляет к жизням
В таблице quest такие данные:
id_quest – уникальный номер квеста
cont_quest – завершен квест или нет?
kill_quest – сколько убито противников
В таблице battle такие данные:
id_btl – уникальный номер битвы
end_btl – исход битвы ( выиграли вы или проиграли )
В таблице enemy такие данные:
id_enm – уникальный номер врага
name_enm – имя врага
life_enm – жизни врага
atk_enm - атака
def_enm - защита
lov_enm - ловкость
exp_enm – сколько опыта даст если победить его
path_enm – путь к картинкам врага</div>
Думаю все, если чего то не хватает, то по ходу написания доделаем. С установкой xampp я думаю разобрались. Теперь запустите его, в xampp Control Panel должно быть запущено Apache и MySQL, все остальное выключено. Напротив MySQL есть кнопка Admin, жмите на нее и попадете в утилиту phpMyAdmin, которая позволяет создавать БД. В открывшемся окне браузера находим вкладку SQL и жмем ее.
Теперь пришло время создать нашу БД, а также ознакомиться со скриптовым языком SQL. Ниже приведен код и прокоментирован, если все таки возникнут вопросы, то задавайте.
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>
DROP DATABASE testgame; /* Если данная БД уже создана, то удаляем ее */
CREATE DATABASE testgame DEFAULT CHARACTER SET cp1251 COLLATE cp1251_general_ci; /* Создаем БД со стандартной кодировкой cp1251(для того что б поддерживался русский язык)*/
USE testgame; /* используем данную БД */
/* таблица персонажа */
CREATE TABLE `users` (
id_user bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
email CHAR(64), /* текстовый тип (64 символа) */
pass CHAR(32), /* текстовый тип (32 символа) */
name CHAR(32), /* текстовый тип (32 символа) */
life INT DEFAULT 50, /* числовой тип, по умолчанию равен 50 */
atk INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
def INT DEFAULT 5, /* числовой тип, по умолчанию равен 5 */
lov INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
lvl INT DEFAULT 1, /* числовой тип, по умолчанию равен 1 */
exp INT DEFAULT 0, /* числовой тип, по умолчанию равен 0 */
PRIMARY KEY (`id_user`) /* Показываем что уникальным номером у нас являеться id_user */
) ENGINE=MyISAM DEFAULT CHARSET=cp1251; /* Обозначаем тип таблицы MyISAM. Таблицы типа MyISAM показывают хорошие результаты при выборках SELECT. Для .jktt подробного изучения читайте Самоучитель по MySQL 5 */
/* таблица аватара */
CREATE TABLE `avatar` (
id_ava bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
gander SMALLINT(1), /* Пол игрока, цыфровой тип(1 цыфра) */
vid SMALLINT(2), /* Вид игрока, цыфровой тип(2 цыфры)*/
path CHAR(32), /* Путь к папке с рисунками персонажа, текстовый тип(32 символа) */
PRIMARY KEY (`id_ava`) /* Показываем что уникальным номером у нас являеться id_ava */
) TYPE=MyISAM;
/* таблица чата */
CREATE TABLE `chat` (
id_msg bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
msg CHAR(255), /* текстовый тип(255 символов) */
time_msg CHAR(5), /* текстовый тип(5 символов) */
wrt_user CHAR(32), /* текстовый тип(32 символов) */
who CHAR(32), /* текстовый тип(32 символов) */
PRIMARY KEY (`id_msg`) /* Показываем что уникальным номером у нас являеться id_msg */
) TYPE=MyISAM;
/* таблица инвентаря */
CREATE TABLE `inventar` (
id_inv bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
name_object CHAR(64),
atk_up INT(2),
def_up INT(2),
lov_up INT(2),
life_up INT(4),
PRIMARY KEY (`id_inv`) /* Показываем что уникальным номером у нас являеться id_msg */
) TYPE=MyISAM;
/* таблица квеста */
CREATE TABLE `quest` (
id_quest bigint(20) unsigned NOT NULL auto_increment,
cont_quest CHAR(32),
kill_quest INT DEFAULT 0,
PRIMARY KEY (`id_quest`)
) TYPE=MyISAM;
/* таблица боя */
CREATE TABLE `battle` (
id_btl bigint(20) unsigned NOT NULL auto_increment,
end_btl CHAR(32),
PRIMARY KEY (`id_btl`)
) TYPE=MyISAM;
/* */
CREATE TABLE `enemy` (
id_enm bigint(20) unsigned NOT NULL auto_increment,
name_enm CHAR(32),
atk_enm INT,
life_enm INT,
def_enm INT,
lov_enm INT,
exp_enm INT,
path_enm CH AR(32),
PRIMARY KEY (`id_enm`)
) TYPE=MyISAM;
/* Добавляем в таблицу данные о враге */
INSERT INTO enemy (name_enm,
atk_enm,life_enm,def_enm,lov_enm,exp_enm,path_enm)
VALUES('Призраки','7','40','6','4','10','path/enemy/'); </div>
С таблицей справились, проверяем, все нормально. SQL запрос прошел удачно. На этом урок заканчиваеться, ждите продожения smile
Если возникли вопросы пишите в этой теме.
Если есть какие то подправки в код, тоже пишите, так как я так же как и вы учусь создавать браузерную флеш игру и тоже могу ошибаться.
-----------------------------------------------------------------------------------------------------
Урок № 2 Создание формы входа и I этап регистрации
Итак приступаем ко второму уроку. Здесь я опишу как с помощью html создаються формы, и как с помощью php можно записать данные, введенные в эти формы, в БД.
Сначала создадим форму входа, она будет состоять с двух полей ввода для email игрока и пароля. Также на ней будет 2 кнопки, одна кнопка ведет на скрипт регистрации, другая инициализирует игрока и перемещает его в игру. Для начала перейдите в папку htdocs что находиться в каталоге xampp, у меня это C:\xampp\htdocs\ и удалите все что там есть.
Итак приступим к написанию скрипта, создайте с помощью PSPad новый документ и назовите его index.php, сохраните этот документ в папке htdocs, которая находиться в каталоге xampp. У меня это C:\xampp\htdocs\
После того как сохранили вставьте код приведенный ниже, а лучше перепишите, так вы лучше поймете и запомните.
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Браузерная Флеш игра BTG" />
<meta name="keywords" content="игра, флеш, браузер, BTG, игроки." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>BTG – браузерная онлайн Flash игра</title>
</head>
<body>
<div id='entry'>
<form action=“login.php” method=“post”>
<input class="inup" type="text" onblur="if (value == '') {value='E-mail'}" onfocus="if (value == 'E-mail') {value =''}" value="E-mail" name="email">
<input class="inup" type="password" onblur="if (value == '') {value='Пароль'}" onfocus="if (value == 'Пароль') {value =''}" value="Пароль" name="pass">
<input type="submit" class='btn' value="Войти">
<input type=button class='btn' value=' Регистрация ' onclick='window.location="reg.php"'>
</form>
</div>
</body>
</html> </div>
С формой входа справились, сохраняем ее, открываем браузер и переходим по такому адресу
http://localhost/index.php и видим примерно следующее
(
).
Так сказать не очень впечатляет такое расположение элементов. Что б все красиво оформить создаем в PSPad документ CSS(Cascading Style Sheet) и называем его style.css. В этом документе мы будем хранить всю графическую информацию главной страницы сайта и I этапа регистрации. Приступаем к еаписанию кода.
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>/* Задаем значения для той области документа, которая находиться между тегами <body></body>. background-color это фон нашего сайта, я установил на черный, все остальные значения обозначают что у нас отступы от краев браузера будут равны 0, тоесть их совсем не будет */
body {background-color:#000000;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}
/* Задаем значения для той области которая находиться в теге <div> с именем entry(id=entry)
Задаем цвет текста белый, и выравнивание по-центру */
#entry {color:#ffffff;text-align:center;}
/* Здесь описываються значения для наших кнопок. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг кнопки */
.btn {font-size:7.5pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#2b2b18;border:1px double #817A63;}
/* Здесь описываються значения для наших полей ввода. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг поля */
.inup {text-align:center;font-size:8pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#151616;border: 1px double #817a63;}</div>
Сохраняем документ и снова переходим по адресу http://localhost/index.php и теперь видим более менее приличную картину
Вы конечно можете переделать цвет и фон по своему, это будет вам на пользу.
Теперь если нажать на кнопку Вход то перейдем по адресу http://localhost/login.php , но нам выдаст ошибку так как такого файла нету, мы его еще не создали.
И если нажать на кнопку Регистрация, тоже выдаст ошибку, так как тоже такого файла еще нету.
Файл login.php мы создадим в 3 уроке. Сейчас возьмемся за файл reg.php.
Создаем в PSPad'e новый php файл, сохраняем его с именем reg.php в папку где находиться index.php и style.css.
Итак, что же у нас будет в файле регистрации?
Будет 3 поля, в одном нужно будет ввести email игрока, в другом пароль и в третьем подтверждение пароля.
Также у нас будет check-box для согласия с правилами игры. Ну и конечно кнопка Далее.
При создании этого файла мы впервые столкнемся с языком php, на котором напишем условие проверки заполнения полей, а также записи данных в БД.
Но для начала нам нужно создать файл conf.php, в нем будет храниться информация о нашей БД. Все php скрипты пишуться в таких вот кавычках <?php ?>
Выглядеть это будет так:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><?php
$base_name="localhost"; //имя (стандартно у всех localhost)
$base_user="root"; //юзер (стандартно у всех root)
$base_pass="password"; //пароль (выставить можно зайдя во вкладку Привилегии в phpMyAdmin
$db_name="testgame"; //имя БД
?> </div>
Теперь мы можем приступить к написанию скрипта регистрации:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><?php
session_start(); //стартуем сесию
include "conf.php"; //подключаем файл с параметрами БД
/* Подключаемся к БД, если не получаеться, то выводим ошибку */
$data = mysql_connect($base_name, $base_user, $base_pass);
if(!mysql_select_db($db_name,$data)){
echo "
";
echo mysql_error();
die();
}
//Прверяем на заполнение полей
if ($_POST['next']){ //если нажата кнопка далее, то
$error=0; // переменная равна 0
//Проверка на мыло
if (!$_POST['email']){ $errm = "Вы не ввели e-mail
"; $error=1;}
if(!preg_match("/^[_\.0-9a-z-]{1,}@[_\.0-9a-z-]{1,}\.[_\.0-9a-z-]{2,}$/", $_POST ["email"])) {$errm .= "Неправильный e-mail"; $error =1;}
$c_e = mysql_num_rows(mysql_query("SELECT id FROM players where email='".$_POST ["email"]."'")); {if ($c_e>0) {$errm .= "Данный e-mail уже зарегистрирован в игре"; $error=1;}}
//Проверка на пароль
if(!$_POST ["pass"]) {$errp = "Необходимо указать Ваш пароль
"; $error =1;}
if(!preg_match("/^[А-Яа-яЁёa-zA-Z0-9]+$/",$_POST ["pass"])) {$errp .= "Пароль содержит запрещенный символ
"; $error =1;}
if (strlen ($_POST ["pass"])<6 || strlen ($_POST ["pass"])>25){ $errp .="Длина пароля от 6 до 25 символов
"; $error =1;}
if ($_POST ["pass"]!= $_POST ["pass2"]){ $errp .="Введёные вами пароли не совпадают!"; $error =1;}
//проверка на согласие с правилами
if (!$_POST['rules']) {$errr = "Вы не согласны с правилами?
"; $error=1;}
// Нет ошибок, создаём перса
if(!$error)
{
$ip = $_SERVER['REMOTE_ADDR'];//узнаем ip адрес юзера
/* Записываем данные в БД */
mysql_query ("INSERT INTO players (pass, ip, email) values('".md5($_POST ["pass"])."','".$ip."','".addslashes($_POST ["email"])."')") or die("Invalid query: " . mysql_error());
session_register("email");//регестрируем сессию email
session_register("ip");//регестрируем сессию ip
$_SESSION['user'] = $_POST['email']; //записуем email в глобыльную переменную $_SESSION
$_SESSION['ip'] = $_POST['ip'];//записуем ip в глобыльную переменную $_SESSION
?>
<script>location.href="goreg.php";</script>
<?php
}
}
// Выводим ошибочки
function err($text){
return "<tr valign='middle' align='left'><td colspan='2'>$text</td></tr>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Браузерная Флеш игра BTG" />
<meta name="keywords" content="игра, флеш, браузер, BTG, игроки." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>BTG – браузерная онлайн Flash игра</title>
</head>
<body>
<div id="reg">
<form action="" method="post">
<table align="center">
<tr><td align="left" width="200">E-mail:</td><td><input type="text" value="<?php echo $_POST['email'] ?>" name="email" class="inup"></td></tr>
<?php echo err($errm); ?>
<tr><td align="left" width="200">Пароль:</td><td><input type="password" value="" name="pass" class="inup"></td></tr>
<?php echo err($errp); ?>
<tr><td align="left" width="200">Повторите пароль:</td><td><input type="password" value="" name="pass2" class="inup"></td></tr>
</table>
<span><input type="checkbox" class="inup" name="rules"> Я обязуюсь соблюдать
<?php echo err($errr); ?>
<input type="submit" name="next" value="Дальше" class="btn">
</form>
</div>
</body>
</html> </div>
Теперь обьясняю. После нажатии кнопки Далее происходит проверка скрипта, если все поля введены, то переадресовываем на следующую страницу в которой будет создавать своего персонажа, но это в 3 уроке.
Если поля или какое то поле пустое, то выводиться ошибка.
Так же у нас появился новый параметр — ip. Мы его не обозначили в нашей БД.
Так что заходим в phpMyAdmin, Переходим по нашей БД testgame, жмем на таблицу users и добавляем ip, по скринам думаю разберетесь:
Теперь нам нужно подправить файл style.css, так как в нашем скрипте добавился еще один класс reg. Добавим следующий код:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>#reg {color:#ffffff;text-align:center;}
.error {FONT-SIZE:8pt;FONT-FAMILY:verdana;COLOR:red;}
A:link {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
A:visited {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
A:active {COLOR:#77684D;TEXT-DECORATION:none;font-weight:normal;}
A:hover {COLOR: #7E7765;TEXT-DECORATION:underline} </div>
A:link, A:visited, A:active, A:hover — описывают состояние ссылки при наведении на нее мишки, при нажатии, при покидании области ссылки и в неактивном состоянии.
Вот и второй урок подошел к концу, если возникли вопросу, прошу задавайте, буду рад ответить.
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px">Скрытая информация: Данный мануал взят с <input type="button" value="Показать" style="width:60px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Показать'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
http://gcup.ru/forum/51
</div>
</div>
</div>
Надеюсь кому пригодится. Вобщем по мере появления новых уроков буду выкладывать. Ну и предлагаю если кому интересна эта тема можем тоже коллективно писать уроки тут.
Создание Браузерной Онлайн игры :
Очень часто встречаю темы в которых спрашиваеться как сделать браузерную игру, так вот решил написать небольшое пособие с чего начать таким новичкам.
1) Для начала нужно очень много терпения и твердого решения идти до победного конца. Иначе все оборачиваеться тем что сделали регистрацию и форму входа, на этом и закончилась игра. Также не помешает команда, но это уже как получиться.
2) Нужно иметь неплохие знания в таких скриптовых языках:
- php
- html
- css
- javascript
- MySQL
- AS3 (Flash)
3) Литература:
В интернете очень много разной литературы по приведенным выше скриптовых языках, используйте какая вам нравиться
Но я все таки посоветую те книги по которым сам учился: PHP:
А. Кухарчик Обучение на примерах
PHP для чайников
html, css:
http://www.htmlbook.ru/
java script:
javascript.ru
MySQL:
Самоучитель MySQL 5
AS3:
demiart.ru
easyflash.org
ActionScript 3.0 для Flash. Подробное руководство. Колин Мук
ActionScript 3.0 Сборник рецептов. Джои Лотт. Деррон Шалл. Кейт Питерс
4) Также вам нужно определиться что именно вы хотите сделать, описать все аспекты вашей игры, расписать подробное Техническое задание для себя и если вы делаете командой, то и для остальных. И можете приступать
Но это только малая часть того что нужно, все остальное прибудет с опытом ( надеюсь
)Успехов в нашем нелегком деле
-----------------------------------------------------------------------------------------------------
Урок по созданию браузерной игры № 1
Появилась такая идея как создать курс по теме: «Создание браузерной флеш игры». В этом курсе будет описываться главные аспекты игры, также, надеюсь, под конец курса многие поймут как делаються такие игры. Может возьмут этот курс за основу для своей будущей игры. Все уроки которые будут здесь написаны, будут максимально прокоментированы, если что то не понятно, то задавайте вопросы сразу в той теме в которой написан урок.
Что понадобиться:
PSPad – программа для написания php скриптов ( можно и другие, но я пользуюсь этой и привык к ней ).
FlashDevelop – для написания флеш модулей ( далее буду писать его сокращенно FD)
xampp — сборка веб-сервера ( будем тестировать наши скрипты )
Так как я не очень хорошо рисую, все картинки буду брать из конструктора RPG Maker.
Думаю с программами определились, перейдем к описанию уроков.
Уроки:
1. Урок № 1 Обсуждение игры. Создание БД (MySQL)
2. Урок № 2 Создание формы входа и I этап регистрации (php, html, MySQL,css)
3. Урок № 3 II этап регистрации (php, FD, MySQL)(в разработке)
4. Урок № 4 Игровое окно. Техническое описание чата (php, FD, MySQL)(в разработке)
5. Урок № 5 Создание чата (php, FD, MySQL)(в разработке)
6. Урок № 6 Создание характеристик чара (php, FD, MySQL)(в разработке)
7. Урок № 7 Техническое описание инвентаря(в разработке)
8. Урок № 8 Создание инвентаря (php, FD, MySQL)(в разработке)
9. Урок № 9 Игровое поле (php, FD, MySQL)(в разработке)
10. Урок № 10 Создание обьектов на игровом поле (php, FD, MySQL)(в разработке)
11. Урок № 11 Создание квеста (php, FD, MySQL)(в разработке)
12. Урок № 12 Техническое описание модуля боя(в разработке)
13. Урок № 13 Создание модуля боя (php, FD, MySQL)(в разработке)
14. Урок № 14 Создание системы прокачки героя (php, FD, MySQL)(в разработке)
15. Урок № 15 Подведем итоги(в разработке)
Вот такой перечень уроков. Уроки буду писать основываясь на собственном опыте, ни в каких книгах вы их не найдете, так что и не думайте что я с какой то книжки все это переписываю. Думаю по одному уроку в день писать, но как вы знаете теория и практика совершенно разные вещи, так что тогда извеняйте и ждите happy
В каждом уроке буду все детально расписывать, ведь курс расчитан на новичков, людей еще не опытных в сфере создания игр.
База данных
Итак начнем с сердца игры, ее Базы Данных (далее БД). Для чего она нужна? В ней будут храниться все данные, такие как: характеристики персонажа, сообщения в чате, какие предметы находяться в инвентаре и т.д. Мы будем пользоваться БД MySQL, так как она очень хорошо подходит для наших php скриптов. БД хранит в себе таблицы, в каждой таблице находяться столбцы, например таблица «users» имеет 3 столбца: “login”, “pass”, “email”. Думаю с этим разобрались.
У нас будет 7 таблиц:
users – хранит все характеристики игрока
avatar – хранит вид персонажа
chat – хранит сообщения чата
inventar – отображает какие вещи в инвентаре
quest – хранит данные о квесте
battle – хранит данные о боях
enemy – хранит данные о врагах
В дальнейшем БД может дополниться. Теперь рассмотрим каждую таблицу отдельно.
В таблице users будем хранить такие данные:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>id_user – уникальный номер персонажа
email — email игрока, по нему будет осуществляться вход в игру
pass - пароль
name — имя игрока, будет отображаться в самой игре и в чате
life – жизни персонажа
atk — значение атаки
def - значение защиты
lov – значение ловкости
lvl – уровень игрока
exp – опыт игрока
В таблице avatar такие данные:
id_ava – уникальный номер аватарки
gander – какого пола персонаж
vid – какой вид у персонажа
path – путь к папке с картинками персонажа
В таблице chat такие данные:
id_msg – уникальный номер сообщения
msg – сообщение
time_msg – время когда было написано сообщение
wrt_user – кто написал
who – кому написали
В таблице inventar такие данные:
id_inv – уникальный номер вещи
name_object – название вещи
atk_up – сколько добавляет к атаке
def_up - сколько добавляет к защите
lov_up - сколько добавляет к ловкости
life_up - сколько добавляет к жизням
В таблице quest такие данные:
id_quest – уникальный номер квеста
cont_quest – завершен квест или нет?
kill_quest – сколько убито противников
В таблице battle такие данные:
id_btl – уникальный номер битвы
end_btl – исход битвы ( выиграли вы или проиграли )
В таблице enemy такие данные:
id_enm – уникальный номер врага
name_enm – имя врага
life_enm – жизни врага
atk_enm - атака
def_enm - защита
lov_enm - ловкость
exp_enm – сколько опыта даст если победить его
path_enm – путь к картинкам врага</div>
Думаю все, если чего то не хватает, то по ходу написания доделаем. С установкой xampp я думаю разобрались. Теперь запустите его, в xampp Control Panel должно быть запущено Apache и MySQL, все остальное выключено. Напротив MySQL есть кнопка Admin, жмите на нее и попадете в утилиту phpMyAdmin, которая позволяет создавать БД. В открывшемся окне браузера находим вкладку SQL и жмем ее.
Теперь пришло время создать нашу БД, а также ознакомиться со скриптовым языком SQL. Ниже приведен код и прокоментирован, если все таки возникнут вопросы, то задавайте.
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>
DROP DATABASE testgame; /* Если данная БД уже создана, то удаляем ее */
CREATE DATABASE testgame DEFAULT CHARACTER SET cp1251 COLLATE cp1251_general_ci; /* Создаем БД со стандартной кодировкой cp1251(для того что б поддерживался русский язык)*/
USE testgame; /* используем данную БД */
/* таблица персонажа */
CREATE TABLE `users` (
id_user bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
email CHAR(64), /* текстовый тип (64 символа) */
pass CHAR(32), /* текстовый тип (32 символа) */
name CHAR(32), /* текстовый тип (32 символа) */
life INT DEFAULT 50, /* числовой тип, по умолчанию равен 50 */
atk INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
def INT DEFAULT 5, /* числовой тип, по умолчанию равен 5 */
lov INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
lvl INT DEFAULT 1, /* числовой тип, по умолчанию равен 1 */
exp INT DEFAULT 0, /* числовой тип, по умолчанию равен 0 */
PRIMARY KEY (`id_user`) /* Показываем что уникальным номером у нас являеться id_user */
) ENGINE=MyISAM DEFAULT CHARSET=cp1251; /* Обозначаем тип таблицы MyISAM. Таблицы типа MyISAM показывают хорошие результаты при выборках SELECT. Для .jktt подробного изучения читайте Самоучитель по MySQL 5 */
/* таблица аватара */
CREATE TABLE `avatar` (
id_ava bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
gander SMALLINT(1), /* Пол игрока, цыфровой тип(1 цыфра) */
vid SMALLINT(2), /* Вид игрока, цыфровой тип(2 цыфры)*/
path CHAR(32), /* Путь к папке с рисунками персонажа, текстовый тип(32 символа) */
PRIMARY KEY (`id_ava`) /* Показываем что уникальным номером у нас являеться id_ava */
) TYPE=MyISAM;
/* таблица чата */
CREATE TABLE `chat` (
id_msg bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
msg CHAR(255), /* текстовый тип(255 символов) */
time_msg CHAR(5), /* текстовый тип(5 символов) */
wrt_user CHAR(32), /* текстовый тип(32 символов) */
who CHAR(32), /* текстовый тип(32 символов) */
PRIMARY KEY (`id_msg`) /* Показываем что уникальным номером у нас являеться id_msg */
) TYPE=MyISAM;
/* таблица инвентаря */
CREATE TABLE `inventar` (
id_inv bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
name_object CHAR(64),
atk_up INT(2),
def_up INT(2),
lov_up INT(2),
life_up INT(4),
PRIMARY KEY (`id_inv`) /* Показываем что уникальным номером у нас являеться id_msg */
) TYPE=MyISAM;
/* таблица квеста */
CREATE TABLE `quest` (
id_quest bigint(20) unsigned NOT NULL auto_increment,
cont_quest CHAR(32),
kill_quest INT DEFAULT 0,
PRIMARY KEY (`id_quest`)
) TYPE=MyISAM;
/* таблица боя */
CREATE TABLE `battle` (
id_btl bigint(20) unsigned NOT NULL auto_increment,
end_btl CHAR(32),
PRIMARY KEY (`id_btl`)
) TYPE=MyISAM;
/* */
CREATE TABLE `enemy` (
id_enm bigint(20) unsigned NOT NULL auto_increment,
name_enm CHAR(32),
atk_enm INT,
life_enm INT,
def_enm INT,
lov_enm INT,
exp_enm INT,
path_enm CH AR(32),
PRIMARY KEY (`id_enm`)
) TYPE=MyISAM;
/* Добавляем в таблицу данные о враге */
INSERT INTO enemy (name_enm,
atk_enm,life_enm,def_enm,lov_enm,exp_enm,path_enm)
VALUES('Призраки','7','40','6','4','10','path/enemy/'); </div>
С таблицей справились, проверяем, все нормально. SQL запрос прошел удачно. На этом урок заканчиваеться, ждите продожения smile
Если возникли вопросы пишите в этой теме.
Если есть какие то подправки в код, тоже пишите, так как я так же как и вы учусь создавать браузерную флеш игру и тоже могу ошибаться.
-----------------------------------------------------------------------------------------------------
Урок № 2 Создание формы входа и I этап регистрации
Итак приступаем ко второму уроку. Здесь я опишу как с помощью html создаються формы, и как с помощью php можно записать данные, введенные в эти формы, в БД.
Сначала создадим форму входа, она будет состоять с двух полей ввода для email игрока и пароля. Также на ней будет 2 кнопки, одна кнопка ведет на скрипт регистрации, другая инициализирует игрока и перемещает его в игру. Для начала перейдите в папку htdocs что находиться в каталоге xampp, у меня это C:\xampp\htdocs\ и удалите все что там есть.
Итак приступим к написанию скрипта, создайте с помощью PSPad новый документ и назовите его index.php, сохраните этот документ в папке htdocs, которая находиться в каталоге xampp. У меня это C:\xampp\htdocs\
После того как сохранили вставьте код приведенный ниже, а лучше перепишите, так вы лучше поймете и запомните.
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Браузерная Флеш игра BTG" />
<meta name="keywords" content="игра, флеш, браузер, BTG, игроки." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>BTG – браузерная онлайн Flash игра</title>
</head>
<body>
<div id='entry'>
<form action=“login.php” method=“post”>
<input class="inup" type="text" onblur="if (value == '') {value='E-mail'}" onfocus="if (value == 'E-mail') {value =''}" value="E-mail" name="email">
<input class="inup" type="password" onblur="if (value == '') {value='Пароль'}" onfocus="if (value == 'Пароль') {value =''}" value="Пароль" name="pass">
<input type="submit" class='btn' value="Войти">
<input type=button class='btn' value=' Регистрация ' onclick='window.location="reg.php"'>
</form>
</div>
</body>
</html> </div>
С формой входа справились, сохраняем ее, открываем браузер и переходим по такому адресу
http://localhost/index.php и видим примерно следующее
(
Так сказать не очень впечатляет такое расположение элементов. Что б все красиво оформить создаем в PSPad документ CSS(Cascading Style Sheet) и называем его style.css. В этом документе мы будем хранить всю графическую информацию главной страницы сайта и I этапа регистрации. Приступаем к еаписанию кода.
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>/* Задаем значения для той области документа, которая находиться между тегами <body></body>. background-color это фон нашего сайта, я установил на черный, все остальные значения обозначают что у нас отступы от краев браузера будут равны 0, тоесть их совсем не будет */
body {background-color:#000000;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}
/* Задаем значения для той области которая находиться в теге <div> с именем entry(id=entry)
Задаем цвет текста белый, и выравнивание по-центру */
#entry {color:#ffffff;text-align:center;}
/* Здесь описываються значения для наших кнопок. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг кнопки */
.btn {font-size:7.5pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#2b2b18;border:1px double #817A63;}
/* Здесь описываються значения для наших полей ввода. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг поля */
.inup {text-align:center;font-size:8pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#151616;border: 1px double #817a63;}</div>
Сохраняем документ и снова переходим по адресу http://localhost/index.php и теперь видим более менее приличную картину
Вы конечно можете переделать цвет и фон по своему, это будет вам на пользу.
Теперь если нажать на кнопку Вход то перейдем по адресу http://localhost/login.php , но нам выдаст ошибку так как такого файла нету, мы его еще не создали.
И если нажать на кнопку Регистрация, тоже выдаст ошибку, так как тоже такого файла еще нету.
Файл login.php мы создадим в 3 уроке. Сейчас возьмемся за файл reg.php.
Создаем в PSPad'e новый php файл, сохраняем его с именем reg.php в папку где находиться index.php и style.css.
Итак, что же у нас будет в файле регистрации?
Будет 3 поля, в одном нужно будет ввести email игрока, в другом пароль и в третьем подтверждение пароля.
Также у нас будет check-box для согласия с правилами игры. Ну и конечно кнопка Далее.
При создании этого файла мы впервые столкнемся с языком php, на котором напишем условие проверки заполнения полей, а также записи данных в БД.
Но для начала нам нужно создать файл conf.php, в нем будет храниться информация о нашей БД. Все php скрипты пишуться в таких вот кавычках <?php ?>
Выглядеть это будет так:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><?php
$base_name="localhost"; //имя (стандартно у всех localhost)
$base_user="root"; //юзер (стандартно у всех root)
$base_pass="password"; //пароль (выставить можно зайдя во вкладку Привилегии в phpMyAdmin
$db_name="testgame"; //имя БД
?> </div>
Теперь мы можем приступить к написанию скрипта регистрации:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><?php
session_start(); //стартуем сесию
include "conf.php"; //подключаем файл с параметрами БД
/* Подключаемся к БД, если не получаеться, то выводим ошибку */
$data = mysql_connect($base_name, $base_user, $base_pass);
if(!mysql_select_db($db_name,$data)){
echo "
";
echo mysql_error();
die();
}
//Прверяем на заполнение полей
if ($_POST['next']){ //если нажата кнопка далее, то
$error=0; // переменная равна 0
//Проверка на мыло
if (!$_POST['email']){ $errm = "Вы не ввели e-mail
"; $error=1;}
if(!preg_match("/^[_\.0-9a-z-]{1,}@[_\.0-9a-z-]{1,}\.[_\.0-9a-z-]{2,}$/", $_POST ["email"])) {$errm .= "Неправильный e-mail"; $error =1;}
$c_e = mysql_num_rows(mysql_query("SELECT id FROM players where email='".$_POST ["email"]."'")); {if ($c_e>0) {$errm .= "Данный e-mail уже зарегистрирован в игре"; $error=1;}}
//Проверка на пароль
if(!$_POST ["pass"]) {$errp = "Необходимо указать Ваш пароль
"; $error =1;}
if(!preg_match("/^[А-Яа-яЁёa-zA-Z0-9]+$/",$_POST ["pass"])) {$errp .= "Пароль содержит запрещенный символ
"; $error =1;}
if (strlen ($_POST ["pass"])<6 || strlen ($_POST ["pass"])>25){ $errp .="Длина пароля от 6 до 25 символов
"; $error =1;}
if ($_POST ["pass"]!= $_POST ["pass2"]){ $errp .="Введёные вами пароли не совпадают!"; $error =1;}
//проверка на согласие с правилами
if (!$_POST['rules']) {$errr = "Вы не согласны с правилами?
"; $error=1;}
// Нет ошибок, создаём перса
if(!$error)
{
$ip = $_SERVER['REMOTE_ADDR'];//узнаем ip адрес юзера
/* Записываем данные в БД */
mysql_query ("INSERT INTO players (pass, ip, email) values('".md5($_POST ["pass"])."','".$ip."','".addslashes($_POST ["email"])."')") or die("Invalid query: " . mysql_error());
session_register("email");//регестрируем сессию email
session_register("ip");//регестрируем сессию ip
$_SESSION['user'] = $_POST['email']; //записуем email в глобыльную переменную $_SESSION
$_SESSION['ip'] = $_POST['ip'];//записуем ip в глобыльную переменную $_SESSION
?>
<script>location.href="goreg.php";</script>
<?php
}
}
// Выводим ошибочки
function err($text){
return "<tr valign='middle' align='left'><td colspan='2'>$text</td></tr>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Браузерная Флеш игра BTG" />
<meta name="keywords" content="игра, флеш, браузер, BTG, игроки." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>BTG – браузерная онлайн Flash игра</title>
</head>
<body>
<div id="reg">
<form action="" method="post">
<table align="center">
<tr><td align="left" width="200">E-mail:</td><td><input type="text" value="<?php echo $_POST['email'] ?>" name="email" class="inup"></td></tr>
<?php echo err($errm); ?>
<tr><td align="left" width="200">Пароль:</td><td><input type="password" value="" name="pass" class="inup"></td></tr>
<?php echo err($errp); ?>
<tr><td align="left" width="200">Повторите пароль:</td><td><input type="password" value="" name="pass2" class="inup"></td></tr>
</table>
<span><input type="checkbox" class="inup" name="rules"> Я обязуюсь соблюдать
Вам необходимо зарегистрироваться для просмотра ссылок
</p><?php echo err($errr); ?>
<input type="submit" name="next" value="Дальше" class="btn">
</form>
</div>
</body>
</html> </div>
Теперь обьясняю. После нажатии кнопки Далее происходит проверка скрипта, если все поля введены, то переадресовываем на следующую страницу в которой будет создавать своего персонажа, но это в 3 уроке.
Если поля или какое то поле пустое, то выводиться ошибка.
Так же у нас появился новый параметр — ip. Мы его не обозначили в нашей БД.
Так что заходим в phpMyAdmin, Переходим по нашей БД testgame, жмем на таблицу users и добавляем ip, по скринам думаю разберетесь:
Теперь нам нужно подправить файл style.css, так как в нашем скрипте добавился еще один класс reg. Добавим следующий код:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>#reg {color:#ffffff;text-align:center;}
.error {FONT-SIZE:8pt;FONT-FAMILY:verdana;COLOR:red;}
A:link {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
A:visited {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
A:active {COLOR:#77684D;TEXT-DECORATION:none;font-weight:normal;}
A:hover {COLOR: #7E7765;TEXT-DECORATION:underline} </div>
A:link, A:visited, A:active, A:hover — описывают состояние ссылки при наведении на нее мишки, при нажатии, при покидании области ссылки и в неактивном состоянии.
Вот и второй урок подошел к концу, если возникли вопросу, прошу задавайте, буду рад ответить.
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px">Скрытая информация: Данный мануал взят с <input type="button" value="Показать" style="width:60px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Показать'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
http://gcup.ru/forum/51
</div>
</div>
</div>
Надеюсь кому пригодится. Вобщем по мере появления новых уроков буду выкладывать. Ну и предлагаю если кому интересна эта тема можем тоже коллективно писать уроки тут.
