Skip to content

Latest commit

 

History

History
319 lines (205 loc) · 13.7 KB

L1.md

File metadata and controls

319 lines (205 loc) · 13.7 KB

게임 서버 만들기 1

수업내용

  • 수업 정보
  • 기초 설정과 준비
    • 게임 생성하기
    • 필요 리소스 다운하기
    • 유니티 UI
    • 기본 패널 만들기
  • 게임 관리 스크립트 작성하기
    • 스크립트 작성 시작하기
    • 오브젝트에 스크립트 적용하기
  • 서버와 연결 시작하기 - 로그인 기능 제작
    • 코루틴이란
    • 서버 관련 코드 설명
    • 서버와 연결하기

수업 정보

  • UI를 최대한 활용한 간단한 예시를 통해서 간단한 서버 활용 익히기
  • 서버 자체 제작은 마지막에 간단히 주로 이미 만들어진 서버를 이용하여 이를 활용하는 방법 배우기
  • 웹서버 이용하는 이유 - 다양한 어플리케이션 적용가능, IOS, ANDROID, 컴퓨터 모두 제한없이 접근가능

기초 설정과 준비

게임 생성하기

템플릿 : 2D

버전 : 20.1.2f (예시)

⇒ 가장 최근 유니티 버전을 사용하시면 됩니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled.png

해상도 설정

이번 예시에선 휴대폰 어플에 알맞게 해상도를 변경해서 사용합니다. Game에서 왼쪽 위의 해상도 설정 버튼으로 해상도를 설정할 수 있습니다.

해상도 1080 x 1920 설정 ( 휴대폰 어플 대상 )

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%201.png

폴더 생성하기

Assets창>오른쪽 마우스클릭>Create-Folde

Images, Prefabs, Font, Scenes, Script 폴더를 생성해줍니다.

폴더를 사용하면 리소스를 분할하여 관리하기 편합니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%202.png

필요 리소스 다운하기

  • USB이용 배포 OR 다운로드 링크

Assets.zip

사용할 리소스 불러오기 Assets > Images에 드래그 앤 드롭합니다. 유니티에선 드래그앤드롭으로 손쉽게 파일을 불러오고 내보낼 수 있습니다.

유니티 UI

이번 예시에선 유니티에 내장되어있는 UI (UserInterface)를 주로 사용하여 로그인, 회원가입을 구현하고 간단한 게임까지 만들어보겠습니다.

과거 유니티 엔진은 UI개발의 불편함이 많아 외면을 받고 대신에 NGUI를 많이 사용하였습니다. 하지만 NGUI개발자가 참여하며 이러한 문제점이 해결된 새로운 유니티 UI가 탑재되었고 현재의 UI는 개발자들이 쉽게 사용가능하게 되어있습니다.

Canvas

모든 UI 요소는 Canvas 안에 위치해야 합니다. 캔버스는 Canvas 컴포넌트가 있는 게임 오브젝트이며 모든 UI 요소는 반드시 어떤 캔버스의 자식이어야 합니다.

Panel

Panel은 Canvas에 포함되는 배경, 틀이라고 생각하시면 됩니다. 다른 UI를 배치할 틀을 설정합니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%203.png

주의사항

  • Panel 생성시 기본 투명도가 설정되어 있으므로 원하는 투명도로 바꾸어줘야 합니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%204.png

기본 투명도는 100이다.

  • Canvas 안의 요소들은 배치 순서가 우선도에 반영되므로 배치 순서가 매우 중요합니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%205.png

가장 아래에 배치된 패널부터 화면 앞에 표현됨

기본 패널 만들기

UI를 이용한 게임이므로 UI의 Panel을 이용하여 화면을 꾸미고 구성해보겠습니다. 패널을 생성하게되면 Canvas가 자동 생성됩니다.

필요 패널 제작하기

필요한 패널과 텍스트, Inputfield를 미리 생성하고 이름을 붙여줍니다. 각 이름 앞의 단어의 의미는 다음과 같습니다.

pan : 패널 오브젝트 ( 배경, 틀 )

  • pan_login : 로그인 관련 틀

if : Inputfield 오브젝트 ( 사용자 입력을 받아들임 )

  • if_login_id : 아이디 입력창
  • if_login_pw : 비밀번호 입력창

tx : Text 오브젝트 ( 텍스트를 출력함 )

  • tx_login_id, tx_login_pw : 화면에 표시될 id, pw 글자
  • tx_login_result : 로그인 결과 출력할 글자

bt : Button 오브젝트 ( 사용자 마우스 입력을 받아들임 )

  • bt_login : 로그인 버튼

  • bt_login_signup : 회원가입 버튼

    %E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%206.png

UI 오브젝트 배치하기

앞서 생성한 UI들을 크기를 적절히 변경하여 화면에 배치합니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%207.png

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%208.png

게임 관리 스크립트 작성하기

스크립트 작성 시작하기

"Assets/Scripts" 에서 Create > c# Script로 스크립트를 생성한 후 Gamemanager.cs로 저장합니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%209.png

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2010.png

오브젝트에 스크립트 적용하기

스크립트 파일을 MainCamera 오브젝트 에 드래그 앤 드롭하여 적용해줍니다. 이렇게 적용한 스크립트는 오브젝트의 Inspector창에서 따로 관리할 수 있습니다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2011.png

에디터 연동 값 설정하기

유니티 에디터 기능을 이용하여 스크립트 밖에서 스크립트 값 조정과 오브젝트 연동을 할 수 있습니다.

유니티 에디터

  • Property 값들을 설정할 수 있는 패널을 뜻합니다.
  • 기본적으로 유니티 내 게임 오브젝트에 스크립트를 부착하고 그 안에 클래스들의 변수들이 public으로 설정되어 있으면 하나의 인스펙터로 구분, 관리할 수 있습니다.

유니티 에디터 관련 코드

[Header("Title")]

  • 그룹 이름을 지어 구분짓기를 가능케해줍니다.

→ 유니티 에디터 필요 변수들이 많아질 경우 관리하기 편리합니다.

[Range(a,b)]

  • 사용자에게 입력받을 값의 범위를 정해주어 오류를 방지하는 기능을 합니다.

위의 코드를 이용하여 Stage오브젝트에서 Stage 스크립트의 값들을 손쉽게 관리 가능합니다.

https://github.com/haedal-with-knu/HAE-U/raw/master/Lectures2/1%20598b2c3599eb40d7a8ec71da15890ac5/Untitled%2010.png

Gamemanager 스크립트 작성하기

UI를 주로 사용하므로 using UnityEngine.UI 로 UI기능을 사용한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GameManager : MonoBehaviour
{
    [Header("pan_login")]
		public GameObject pan_login;
    public InputField if_login_id;
    public InputField if_login_pw;
    public Text tx_login_result;

}

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2012.png

서버와 연결 시작하기 - 로그인 기능

코루틴이란

코루틴이라는 것은 어떠한 작업을 처리할 때 필요에 따라 시간 간격을 두고 작업을 처리할 수 있도록 도와주는 함수 형식입니다.

서버의 통신 속도에 따라 유동적으로 작동할 수 있어야 하므로 서버 통신에는 코루틴을 주로 사용합니다.

  • StartCoroutine 을 이용하여 코루틴을 시작할 수 있습니다.

서버 관련 코드 설명

서버의 php 파일

<?php
//unity import
$id = $_POST['Input_id'];
$pw = $_POST['Input_pw'];
$con = mysqli_connect("localhost","swhtest1","Ace14202!!");
mysqli_select_db($con,"swhtest1");
mysqli_query($con,"set names utf8");

$check = mysqli_query($con,"SELECT * FROM user WHERE `id`='".$id."'"); 

$numrows = mysqli_num_rows($check);    
if ($numrows == 0)	
{
	die("Login-Error-Id");
}
else
{
	while($row = mysqli_fetch_assoc($check))
    {
		if($pw == $row['pw'])
		{	
			//echo("Login-Success");
			echo "".$row['score'] ."";
			die ("");
		}
    }
	die("Login-Error-Pw");
}
?>
  • 로그인 성공시 점수값을 반환
  • 아이디가 존재하지 않을경우 "Login-Error-Id" 반환
  • 패스워드 틀릴경우 "Login-Error-Pw" 반환

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2013.png

Debug.Log 를 이용하여 손쉽게 반환값을 확인할 수 있다.

유니티의 코드

string url_signup = "swhtest.dothome.co.kr/login.php";

...

IEnumerator co_login()
{
    WWWForm form = new WWWForm();

    form.AddField("Input_id", if_login_id.text);
    form.AddField("Input_pw", if_login_pw.text);

    WWW webRequest = new WWW(url_login, form);
    yield return webRequest;
    Debug.Log(webRequest.text);
    if (webRequest.text == "")   //인터넷에러
    {
        Debug.Log("internet Error");
        tx_login_result.text = "internet Error";
    }
		else
    {
        if (webRequest.text == "Login-Error-Id" || webRequest.text == "Login-Error-Pw")
        {
            tx_login_result.text = webRequest.text;
        }
        else
        {
            tx_login_result.text = webRequest.text;
        }
    }
}
  • form.AddField : 유니티에서 서버로 보낼 값을 설정
  • WWW webRequest : 연결할 서버 주소 설정
  • yield return webRequest : 반환값을 webRequest에 저장
  • tx_login_result.text : 반환값을 화면에 표시

버튼 설정하기

버튼을 눌렀을때 스크립트가 실행되기 위해서 스크립트에 코드를 추가해준 후 버튼을 설정해줍니다.

public void btnClick_login()
    {
        StartCoroutine(co_login());
    }

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2014.png

결과 확인

미리 서버에 존재하는 테스트 아이디로 로그인을 하여 잘 되는지 확인해 볼 수 있다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2015.png

ID : testid, PW : testpw

테스트 결과, 값이 tx_login_result에 잘 표시되는것을 확인할 수 있다.

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2016.png

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2017.png

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2018.png

%E1%84%80%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%B7%20%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%20%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5%201%20ab8282b1e1e24b8e8fcaf6d87acde2b8/Untitled%2019.png