일단 본격적으로 게임을 제작하기에 앞서 로그인 창을 먼저 만들어 주었다
이름은 LoginCanvas 라고 지어주었다 여기서 주의 할점은 유니티를 webgl 빌드로 할 때 일반 INPUT FIELD를 사용하게 되면 한글로 나오지 않는다 이에 TMP(Text Mesh Pro를 사용하여) 한글 font 를 넣은 후 Build 하여야 한다 또한 TMP와 TMP InputField에 component에
이런식으로 Web GL Input 스크립트를 추가해주어야한다 이걸 추가 하지 않으면 InputField에 한글이 입력되지 않는 상황이 발생한다 또한 font가 일반 Arial로 되어있는 경우 한글이 유니티 창에서는 보이지만 막상 컴파일 하면 안 나온다 이에 폰트 파일을 다운 받고 이를 TMP용 폰트(ttf)로 바꿔주면 된다. 이러면 한글이 잘 나온다 또한 CITRL+C/V가 작동이 되기 떄문에 나중에 복사 붙여넣기 하기가 편하다.
그다음에 이 캔버스를 관리할 CanvasManager 코드를 작성해 보자.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
namespace Test{
public class CanvasManager : MonoBehaviour {
public static CanvasManager instance;
public Canvas pLobby;
public Canvas LoginPanel;
public Canvas GwanPanel;
public Image backgroundimage;
public Button Xbutton;
public TextMeshProUGUI gwlabel;
public TextMeshProUGUI Namet;
public TextMeshProUGUI gwan1;
public TextMeshProUGUI gwan2;
public TextMeshProUGUI gwan3;
public TextMeshProUGUI sogaeT;
public Button addFriend;
public TMP_InputField chatinput;
public Button sendbutton;
public InputField inputLogin;
public TMP_InputField inputCode;
public GameObject lobbyCamera;
public int currentMenu;
void Start() {
if (instance == null) {
DontDestroyOnLoad(this.gameObject);
instance = this;
OpenScreen(0);
}
else
{
Destroy(this.gameObject);
}
}
public void OpenScreen(int _current)
{
switch (_current)
{
case 0:
currentMenu = _current;
pLobby.enabled = true;
lobbyCamera.GetComponent<Camera>().enabled = true;
break;
case 1:
currentMenu = _current;
pLobby.enabled = false;
lobbyCamera.GetComponent<Camera>().enabled = false;
break;
case 2:
ClosePRS();
currentMenu = _current;
GwanPanel.enabled = true;
pLobby.enabled = true;
LoginPanel.enabled = false;
lobbyCamera.GetComponent<Camera>().enabled = true;
break;
}
}
public void ClosePRS()
{
pLobby.enabled = false;
}
public void setPrs(string name , string gwans, string gwans2 ,string gwans3,string sogae)
{
Namet.text = name;
gwan1.text = gwans;
gwan2.text = gwans2;
gwan3.text = gwans3;
sogaeT.text = sogae;
}
}
}자 일단 CanvasManger를 이렇게 길게 작성해주었다 이렇게 작성 해 준 이유는 일단 내가 진행하는 프로젝트에는 상대의 정보를 열람 할 수 있는 기능을 제공한다 일단 inputLogin과 inputCode창에 입력하는건 나중에 백엔드 mysql서버에 정보를 보내고 받아올 때 사용 할 예정입니다 일단 게임이 처음 시작 됬을 때 start() 함수가 실행되면서 우리 방금 만들어 놓은 login창을 띄워 주게 됩니다. instance를 만들어주는 이유는 다른 스크립트 코드에서 이 CanvasManager에 있는 함수나 변수들에 접근을 편하게 할수 있도록 만들어 주었습니다 OpenScreen(0)가 이 기능을 수행하게 될 것입니다. ClosePRS와 setPrs함수는 나중에 프로필창을 띄울 떄 데이터를 넣어 주기 위해 작성했습니다. 여기에 더하여 저희는 javascript로 간단한 servercode를 작성해 보겠습니다.
const fs = require('fs');
const options = {
key: fs.readFileSync('./private.pem'),
cert: fs.readFileSync('./public.pem')
};
var express = require('express');//express module 갖고오기
require('dotenv').config();
var app = express();// express object생성
var https = require('https').Server(options,app);// 나중에 프론트에 화상회의 기능이 들어가기에 https 사용
var io = require('socket.io')(https, { cors: { origin: "*" } });// 서버 2개에서 정보를 가져올 예정이기 때문에 cors처리
const mysql = require('mysql');
const cors = require('cors');
const createApplication = require('express/lib/express');
const { timeStamp } = require('console');
const PORT = 443;
const conn = { // mysql 접속 설정
host: process.env.DB_HOST,
port: '3306',
user: process.env.DB_USER,
password: process.env.DB_PASS,
database: 'wow_town',
insecureAuth : true
};
var countMysqlUpdate=0;
app.use("/public/TemplateData",express.static(__dirname + "/public/TemplateData"));
app.use("/public/Build",express.static(__dirname + "/public/Build"));
app.use(express.static(__dirname+'/public'));
app.use(cors());
var clients = [];//client저장
var clientLookup = {};//나중에 client찾기
var sockets = {};//소켓 저장
//open a connection with the specific client
io.on('connection', function(socket){
socket.on('LOGIN', function (_data)
{
let IsSameCode;
console.log('[INFO] JOIN received !!! ');
var data = JSON.parse(_data);
currentUser = {
name:data.name,
code:data.code,
position:data.position,
rotation:'0',
id:socket.id,
socketID:socket.id,
animation:"",
userid:"",
sogaeT:"",
email:data.name,
gwansimsa1:"cpp",
gwansimsa2:"cpp",
gwansimsa3:"cpp",
islogged:false,
costume:""
};
currentUser.code=data.code
let connection = mysql.createConnection(conn); // DB 커넥션 생성
connection.connect(); // DB 접속
let sql = "SELECT distinct avatar.id,invite_code, avatar.nick_name,type,description,costume_idx FROM avatar join user join avatar_interest on user.id=avatar.user_id and avatar_interest.avatar_id=avatar.id where user.email="+"'"+data.name+"'";
connection.query(sql, function (err, results, fields) {
if (err) {
console.log(err);
}
let recv=results[0];
let recv1=results[1];
let recv2=results[2];
if(typeof recv == "undefined" || recv == null || recv == "" ||recv.invite_code != currentUser.code){
return 0;
}
currentUser.islogged=true;
currentUser.userid=String(results[0].id);
console.log(recv.user_id);
currentUser.name=recv.nick_name;
currentUser.costume=String(results[0].costume_idx);
socket.emit("LOGIN_SUCCESS",currentUser.id,currentUser.name,currentUser.position,currentUser.userid,currentUser.costume);
console.log('[INFO] player '+currentUser.name+': logged!');
console.log('[INFO] currentUser.position '+currentUser.position);
console.log('[INFO] currentUser.code '+currentUser.code);
console.log('[INFO] currentUser.code '+currentUser.costume);
currentUser.gwansimsa1=results[0].type;
currentUser.gwansimsa2=results[1].type;
currentUser.gwansimsa3=results[2].type;
currentUser.sogaeT=results[0].description;
console.log(currentUser.userid);
console.log(typeof(currentUser.userid));
console.log(currentUser.sogaeT);
console.log(currentUser.gwansimsa1);
clients.push(currentUser);
clientLookup[currentUser.id] = currentUser;
sockets[currentUser.id] = socket;//add curent user socket
console.log('Total players: ' + clients.length);
/*********************************************************************************************/
clients.forEach( function(i) {
if(i.id!=currentUser.id)
{
socket.emit('SPAWN_PLAYER',i.id,i.name,i.position,i.gwansimsa1,i.gwansimsa2,i.gwansimsa3,i.sogaeT,i.userid,i.costume);
}
});
socket.broadcast.emit('SPAWN_PLAYER',currentUser.id,currentUser.name,currentUser.position,currentUser.gwansimsa1,currentUser.gwansimsa2,currentUser.gwansimsa3,currentUser.sogaeT,currentUser.userid,currentUser.costume);
});
connection.end();
console.log(currentUser.name);
console.log(currentUser.userid);
console.log('end');
});
});
https.listen(PORT, function(){
console.log('listening on *:'+PORT);
});앞으로 실제 서버가 aws에 탑재 되거나 github에 올라 갈때를 대비 하여 민감한 정보들은 환경 변수를 이용하여 나중에 같이 탑재 시켜주는게 좋다 또한 https를 이용할려면 인증서 발급을 해야하니 이것도 처리를 같이 해주도록 한다 또한 백엔드에 mysql에 접근하기 위해서 mysql 모듈도 같이 가져와 준다. 또한 port 설정도 백엔드랑 겹치지 않는 port번호로 설정을 해준다. 또한 앞으로 캐릭터를 저장하기 위한 정보부분에 앞으로 사용할정보들을 같이 넣어준다. 후에 우리가 참가하기 버튼을 누르면
socket.on('LOGIN')
이친구가 정보를 받아 다른 클라이언트들에게 로그인 된 캐릭터들에 정보를 뿌릴 것 이다 참고로 이번에 급하게 개발을 진행하면서 자바스크립트의 비동기 처리에 대해 공부가 부족했어서 콜백함수안에 콜백함수를 작성하는 방식으로 비동기 처리를 해주어서 비효율적이다 후에 javascript 공부를 더 해서 이부분은 보완 할 필요가 있다.
let connection = mysql.createConnection(conn); // DB 커넥션 생성
connection.connect(); // DB 접속
let sql = "SELECT distinct avatar.id,invite_code, avatar.nick_name,type,description,costume_idx FROM avatar join user join avatar_interest on user.id=avatar.user_id and avatar_interest.avatar_id=avatar.id where user.email="+"'"+data.name+"'";
connection.query(sql, function (err, results, fields) {
if (err) {
console.log(err);
}
let recv=results[0];
let recv1=results[1];
let recv2=results[2];
if(typeof recv == "undefined" || recv == null || recv == "" ||recv.invite_code != currentUser.code){
return 0;
}
)};
이부분은 mysql서버에 여러분들이 connection을 보내고 정보를 받아오게 된다 이때 정보는 JSON 형식으로 넘어온다
code를 가져오는 이유는 후에 로그인 할때 인증 코드를 발송하는데 이를 mysql서버에 있는 인증코드와 입력한 인증 코드가 같은지를 비교하기 위해 갖고 온다 sql문에 대한 이해가 다들 있을거라고 본다.
이 sql 문을 실행해서 가져온 정보를 이제
currentUser = {
name:data.name,
code:data.code,
position:data.position,
rotation:'0',
id:socket.id,//alternatively we could use socket.id
socketID:socket.id,//fills out with the id of the socket that was open
animation:"",
userid:"",
sogaeT:"",
email:data.name,
gwansimsa1:"cpp",
gwansimsa2:"cpp",
gwansimsa3:"cpp",
islogged:false,
costume:""
};
여기 안에 다 채워넣을것이다 sogaeT의 경우 소개의 정보가 들어갈 칸이고 gwansimsa1,2,3은 관심사 정보를 넣을 공간이다 islogged는 같은 이메일로 login 했을때 login을 불가능 하게 만들기 위해 있는 정보이다
if(typeof recv == "undefined" || recv == null || recv == "" ||recv.invite_code != currentUser.code){
return 0;
}
이부분의 경우 mysql 문이 정보를 못갖고 왔거나 인증 코드가 다르면 socket문이 더이상 실행 되는것을 막는다 mysql이 정보를 못가져왔다는 것은 해당 유저의 정보가 존재 하지 않기 때문이다
socket.emit("LOGIN_SUCCESS",currentUser.id,currentUser.name,currentUser.position,currentUser.userid,currentUser.costume);
이부분은 login이 성공되었기 때문에 자신의 캐릭터를 스폰하기 위해서 client에게 신호를 보낸다
clients.forEach( function(i) {
if(i.id!=currentUser.id)
{
socket.emit('SPAWN_PLAYER',i.id,i.name,i.position,i.gwansimsa1,i.gwansimsa2,i.gwansimsa3,i.sogaeT,i.userid,i.costume);
}
});
socket.broadcast.emit('SPAWN_PLAYER',currentUser.id,currentUser.name,currentUser.position,currentUser.gwansimsa1,currentUser.gwansimsa2,currentUser.gwansimsa3,currentUser.sogaeT,currentUser.userid,currentUser.costume);그 다음 이부분은 지금 로그인한 캐릭터 정보를 기존에 참가하고 있던 client들에게 정보를 전달하는 역할을 한다
오늘은 여기 까지 작성하도록 하겠다
참고자료: 이 제작자의 서버코드에 도움을 많이 받았다
https://assetstore.unity.com/packages/tools/network/webgl-meta-multiplayer-kit-145882?locale=ko-KR#description
'유니티unity > java script webgl multiplay' 카테고리의 다른 글
| 유니티UNITY Webgl multiplayer 개발기(2) (0) | 2022.11.26 |
|---|---|
| 유니티UNITY Webgl multiplayer 개발기(1) (0) | 2022.11.16 |