우리가 충돌 알고리즘을 사용할 때 가장 간단 한 버전의 충돌 알고리즘이다 AABB 알고리즘이란 특정 좌표계에서 사각형혹은 직육면체 형태의 범위에 대한 충돌을 검증 할 때 사용한다
이렇게 4각형이 2개 겹쳐 있을 때 수식을 이용해서 충돌 여부를 구하는 방식이다 이방식은 3차원에서도 비슷하게 사용이 가능하다. 근데 유니티에서 제공하는 함수를 사용 하면 offset 즉 범위 확장이 불가능 했었다. 이에 해당 기능을 직접 구현했어야 했다.
구현하면서 시행착오 겪었던 내용은 Bound의 Min값과 Max값을 계속 가져왔는데 이 좌표계가 매우 이상했다 분명 다른 위치에 있는데 같은좌표를 반화하는것을 보고 Bound의 Min값과 Max값이 local position임을 깨달았다. 이에 해당 사항들을 world position으로 변경 해줘야 한다 이에 TrasnformPorint 함수를 사용해준다
이름은 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 공부를 더 해서 이부분은 보완 할 필요가 있다.
letconnection = mysql.createConnection(conn); // DB 커넥션 생성
connection.connect(); // DB 접속
letsql = "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) {
