2Bbear's knowledge workshop

10. 화면에 안나오는 이유, 그 타협점. 프로젝트의 정리

중단한 프로젝트/WebGameProject(중단)2019. 1. 7. 16:22

1. Coin c++ 클래스 코드를 넣는 것만으로 오류가 발생한다.

- 주된 문제는 C++코드를 JavaScript로 변환하는 과정에서 문제가 생기는 것 같다.

- C++코드를 자바스크립트로 바꾸고 이것을 실행하려고 하면 올바르게 변환되지 않아 실행시 오류가 발생하는 것 같다.


해결 방법 :

C++ 코드로 작성하는 것이 아니라 블루프린트를 이용하여 작성하는 것으로 이러한 문제를 해결하였다. 왜 이렇게 되는지 생각해보면 작성된 C++코드가 올바른 정규 코드가 아니여서 발생하는 문제인 것 같다.



2. 다른 스크립트 코드와 함께 언리얼 js를 호출하면 실행이 안되는 오류

-  확인 안되는 오류지만 먼저 다른 스크립트와 충돌나서 실행이 안되는 걸 수도 있고

-  커져버린 level의 instance 메모리 크기로 인해 간신히 아슬아슬하게 실행 되던 부분을 다른 스크립트들이 메모리를 먹어서 그냥 최대 수용 가능한 메모리를 넘어버린 문제 일 수도 있다.


해결 방법:

못찾음 그냥 기본 level에 있는 걸 들고 오면 잘 실행되길래 ...아무튼 뭔가 기본 level에 넣으려고 하면 터지는거임.




결론 :

UE4로 웹 게임을 개발하는 것은 문제가 많은 것 같다. 아직 이쪽 빌드는 테스트형태로 제대로 된 업데이트가 이루어지지 않은 문제도 있다.


그럼에도 이번 프로젝트로 HTML로 화면을 어떻게 구성해야 하는지 알 수 있었다.

또 Web 게임의 경우 쓰면 안되는 C++ 코드도 알 수 있었다.

destroy(this) 라던지...



============================================================

평가 : 

프로젝트 난이도 - 중

결과 - 하(기대한 게임도 못올렸다.)


얻은 것 - 어떻게 HTML을 꾸미는 지 알 수 있었다.

잃은 것 - 시간.....

'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.  (0) 2019.01.07
8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02

이클립스 프로젝트 폴더 옮겨서 다시 workbench 잡았는데 빨간불 들어올대

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

확인

9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.

중단한 프로젝트/WebGameProject(중단)2019. 1. 7. 01:11

열씸히 만들긴 했지만 오늘 문득 HTML5 빌드를 해보니 실행이 안된다...

이럴 거 같았어...메모리 문제 때문에 실행이 안될 것 같았단 말이야....흙흙...



문제

1. HTML에서 감당하기에는 너무 많은 메모리를 사용하려 해서 게임이 실행 되질 않음....

...

해결 방법이 있을까....

'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

10. 화면에 안나오는 이유, 그 타협점. 프로젝트의 정리  (0) 2019.01.07
8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02

8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편

중단한 프로젝트/WebGameProject(중단)2019. 1. 7. 00:00

만들어야 할 것

- Intro 화면

- InGame 화면

- Ending 화면



1. Intro 화면


간단히 로고 영상을 출력 후 바로 Ingame Level로 전환할 것이다.


참고 : https://youtu.be/uEO_nLnytp0


After effect 2019로 간단히 만든 로고 영상


이제 로고 영상을 Ue4 Intro Level에서 UI로 출력 시키면 된다.


먼저 만들어진 영상을 넣기 위해 



file medi source 를 만들어준다.



이후 만들어진 file media source의 이름은 Ms_Intro2로 하고 이 아이콘을 더블 클릭하면 이런 창이 드는데 여기서 File Path부분을 누르고 방금 만든 logo 영상을 넣어주면 된다.



이후 Media Player를 생성하고



생성 할때 이런 창이 뜨는데 위 사진 처럼 체크 박스에 체크 한 뒤 ok를 누르면 된다.


이후 이름을 설정하면 사진 처럼 아이콘이 2개가 생긴다.


이제 이 영상을 그림으로 보여줄 텍스처를 만듭니다.



마테리얼의 내부 블루프린트는


위 사진의 details를 따라서 해주시고


Texture Sample로는 방금 만들어진 MP_Intro2_Video를 드래그엔 드롭 후 연결을 해줍니다.


이제 Level blueprint를 Open합니다.



그후 내부 블루프린트를 아래의 사진과 같이 해줍니다.



NextLevelName의 타입은 Name이고 기본 값으로 다음 Level의 이름을 갖고 있습니다.




이렇게 인트로 화면이 만들어 졌습니다.



참고 :

https://www.youtube.com/watch?v=7OEbO353_GM 

UE4 Media Player to Render a Media Texture

https://www.youtube.com/watch?v=LwEu2PqqCIo

Unreal Engine 4 HUD: Widget Blueprint Tutorial



'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

10. 화면에 안나오는 이유, 그 타협점. 프로젝트의 정리  (0) 2019.01.07
9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.  (0) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02

7. web에 올라갈 간단한 게임을 만들자.-Coin편

중단한 프로젝트/WebGameProject(중단)2019. 1. 6. 07:13

준비물 : UE4 엔진.



1. 간단한 게임 기획


너무 많은 기능을 넣고 싶지 않기에 간단하게 미로 푸는 게임으로 합니다.



- 맵


이정도로 퉁치고


- 목표

저 동그란 걸 모으는 거에요 하와와.


- 캐릭터

간단한게 최고에요. 바꿀 수도 있는데 굳이 지금은 할 필요가 없죠



2. 기능 정의

ㄱ. ui

- 먹은 코인 수 출력

- Retry 횟수 출력

- GameOver 로고 출력

- Game logo Scene 만들기

- Game ending Scene 만들기

ㄴ. 내부기능

- 코인에 닿으면 먹는 기능

- 닿은 후 코인 오브젝트 삭제 기능

- GameManager 기능

- 게임의 시작, 중지, 끝을 관리

- 현재 플레이어가 모은 코인을 관리 (예 최대 코인 수 12/0 현재 먹은 코인수)

- Scene관리


개발 순서는~~~ ui 하고 내부 기능 하고~ 해야하는 거지만 난 내맘데로 만들꺼야!


3.내부 기능을 만들자


- 코인에 닿으면 먹는 기능을 만들자!


먼저 코인의 뼈와 기둥이 되어줄 C++ 코드를 작성합니다.


먼저 코인!


 //ACoin.h

// Fill out your copyright notice in the Description page of Project Settings.


#pragma once

#include "CoreMinimal.h"

#include "GameFramework/Actor.h"


#include "Coin.generated.h"


UCLASS()

class HOWTOMAKEHTML5_API ACoin : public AActor

{

GENERATED_BODY()

private:

//Sets Componetns

UPROPERTY(VisibleAnywhere, Category = "Config")

class UBoxComponent * pBoxCollision;

UPROPERTY(VisibleAnywhere, Category = "Config")

class UStaticMeshComponent * pStaticMesh;


public:

// Sets default values for this actor's properties

ACoin();


protected:

// Called when the game starts or when spawned

virtual void BeginPlay() override;

public:

UFUNCTION()

void OnOverlapBegin(class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult & SweepResult);

};

 //ACoin.cpp

// Fill out your copyright notice in the Description page of Project Settings.


#include "Coin.h"

#include "Runtime/Engine/Classes/Components/BoxComponent.h"

#include "Runtime/Engine/Classes/Components/StaticMeshComponent.h"

#include "Kismet/GameplayStatics.h"

#include "HowToMakeHTML5GameMode.h"

#include <string>


// Sets default values

ACoin::ACoin()

{

  // Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.

PrimaryActorTick.bCanEverTick = false;

pBoxCollision = CreateDefaultSubobject<UBoxComponent>(TEXT("Boxcollision"));

pBoxCollision->SetGenerateOverlapEvents(true);


pStaticMesh = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("StaticMesh"));


}


// Called when the game starts or when spawned

void ACoin::BeginPlay()

{

Super::BeginPlay();

UE_LOG(LogTemp, Warning, TEXT("ACoin::BeginPlay"));


FScriptDelegate DelegateBegin;

DelegateBegin.BindUFunction(this, "OnOverlapBegin");

this->OnActorBeginOverlap.Add(DelegateBegin);



pBoxCollision->SetupAttachment(RootComponent);

pStaticMesh->SetupAttachment(pBoxCollision);

}


void ACoin::OnOverlapBegin(AActor * OtherActor, UPrimitiveComponent * OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult & SweepResult)

{

UE_LOG(LogTemp, Warning, TEXT("ACoint::OnOverlapBegin"));

//Processing Score

AHowToMakeHTML5GameMode* temp=(AHowToMakeHTML5GameMode*)GetWorld()->GetAuthGameMode();

temp->addPlayerScore();

std::string str= std::to_string(temp->getPlayerScore());


TCHAR ch[20];

const char* all = str.c_str();

int len = 1 + strlen(all);

wchar_t* t = new wchar_t[len];

if (NULL == t) throw std::bad_alloc();

mbstowcs(t, all, len);

_tcscpy_s(ch,t);


UE_LOG(LogTemp, Warning, ch);

//Delete this object

Destroy(this);


}


그 다음에는 score를 관리해주고 게임을 관리해주는 GameMode 찡!

//AHowToMakeHTML5GameMode.h

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#pragma once


#include "CoreMinimal.h"

#include "GameFramework/GameModeBase.h"

#include "HowToMakeHTML5GameMode.generated.h"


UCLASS(minimalapi)

class AHowToMakeHTML5GameMode : public AGameModeBase

{

GENERATED_BODY()


public:

AHowToMakeHTML5GameMode();


private:

int playerScore;

public:

void setPlayerScore(int param);

int getPlayerScore();

void addPlayerScore();


};

 //AHowToMakeHTML5GameMode.cpp

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#include "HowToMakeHTML5GameMode.h"

#include "HowToMakeHTML5Character.h"

#include "UObject/ConstructorHelpers.h"


AHowToMakeHTML5GameMode::AHowToMakeHTML5GameMode()

{

// set default pawn class to our Blueprinted character

static ConstructorHelpers::FClassFinder<APawn> PlayerPawnBPClass(TEXT("/Game/ThirdPersonCPP/Blueprints/ThirdPersonCharacter"));

if (PlayerPawnBPClass.Class != NULL)

{

DefaultPawnClass = PlayerPawnBPClass.Class;

}

}


void AHowToMakeHTML5GameMode::setPlayerScore(int param)

{

if(param<0)

{

throw param;

}

playerScore = param;

}


int AHowToMakeHTML5GameMode::getPlayerScore()

{

return playerScore;

}


void AHowToMakeHTML5GameMode::addPlayerScore()

{

playerScore += 1;

}



간단하게 Coin Actor는 뭔가와 부딪히면 그대로 현재 게임 모드를 불러와서 거기에 score를 수정합니다. 


간단하죠?


-GameMode의 동전관리

총 동전 수를 알아와야 하고 현재 동전수를 관리합니다.

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#pragma once


#include "CoreMinimal.h"

#include "GameFramework/GameModeBase.h"

#include "HowToMakeHTML5GameMode.generated.h"


UCLASS(minimalapi)

class AHowToMakeHTML5GameMode : public AGameModeBase

{

GENERATED_BODY()


public:

AHowToMakeHTML5GameMode();


private:

int playerScore;

public:

void setPlayerScore(int param);

int getPlayerScore();

void addPlayerScore();


protected:

virtual void BeginPlay() override;

};

 // Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.


#include "HowToMakeHTML5GameMode.h"

#include "HowToMakeHTML5Character.h"

#include "UObject/ConstructorHelpers.h"

#include "Runtime/Engine/Public/EngineUtils.h"

#include "Coin.h"

#include <string>


AHowToMakeHTML5GameMode::AHowToMakeHTML5GameMode()

{


// set default pawn class to our Blueprinted character

static ConstructorHelpers::FClassFinder<APawn> PlayerPawnBPClass(TEXT("/Game/ThirdPersonCPP/Blueprints/ThirdPersonCharacter"));

if (PlayerPawnBPClass.Class != NULL)

{

DefaultPawnClass = PlayerPawnBPClass.Class;

}


}


void AHowToMakeHTML5GameMode::setPlayerScore(int param)

{

if(param<0)

{

throw param;

}

playerScore = param;

}


int AHowToMakeHTML5GameMode::getPlayerScore()

{

return playerScore;

}


void AHowToMakeHTML5GameMode::addPlayerScore()

{

playerScore += 1;

}


void AHowToMakeHTML5GameMode::BeginPlay()

{

Super::BeginPlay();

TActorIterator< ACoin > ActorItr =TActorIterator< ACoin >(GetWorld());

int currentWorldCoinCount=ActorItr.GetProgressNumerator();

currentWorldCoinCount -=2;

if(currentWorldCoinCount <0)

{

currentWorldCoinCount = 0;

}


//for debug===========================================================

UE_LOG(LogTemp, Warning, TEXT("AHowToMakeHTML5GameMode::BeginPlay()"));


std::string str = std::to_string(currentWorldCoinCount);

TCHAR ch[20];

const char* all = str.c_str();

int len = 1 + strlen(all);

wchar_t* t = new wchar_t[len];

if (NULL == t) throw std::bad_alloc();

mbstowcs(t, all, len);

_tcscpy_s(ch, t);


UE_LOG(LogTemp, Warning, ch);


//==============================================================

}

로그로 현재 동전의 수를 나타내 줍니다.


그런데 월드에서 찾는 Coin이 2개더 잡히는데...어디서 잡히는거지?...이거 의문이네..


아무튼 이렇게 해서 Coin편 끝.






'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

9. 트러블....트러블....언리얼로 HTML을 만든다는 것은 무리인가.  (0) 2019.01.07
8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02

6. 디자인 수정..다시 홈페이지 만들기.

중단한 프로젝트/WebGameProject(중단)2019. 1. 5. 03:27

1. 아무리 봐도 기존의 디자인이 맘에 안든다. 그때 우리가 선택해야 할 것은?

 템플릿.


https://startbootstrap.com/


이 곳에서 이쁜 템플릿을 다운 받습니다.


2. 그리고 수정합니다.


<!DOCTYPE html>

<html lang="en">

<head>

<title></title>

<meta charset="utf-8">


<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">


<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->


<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">


</head>

<body id="top">

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- Top Background Image Wrapper -->

<div class="bgded overlay" style="background-image:url('images/demo/backgrounds/01.png');"> 

  <!-- ################################################################################################ -->

  <div class="wrapper row1">

    <header id="header" class="hoc clear"> 

      <!-- ################################################################################################ -->

      <div id="logo" class="fl_left">

        <h1><a href="index.html">Jungho's Game - Canopus </a></h1>

      </div>

      

      <nav id="mainav" class="fl_right">

        <ul class="clear">

          <li class="active"><a href="index.html">Home</a></li>

          <li><a class="drop">번역</a>

          <ul>

                  <li><a href="http://localhost:8080/WebGame2/index.html">한글</a></li>

                  <li><a href="http://localhost:8080/WebGame2/index-eng.html">Eng</a></li>

          </ul>

          </li>

        </ul>

      </nav>

      <!-- ################################################################################################ -->

    </header>

  </div>

  <!-- ################################################################################################ -->

  <!-- ################################################################################################ -->

  <!-- ################################################################################################ -->

  <section id="pageintro" class="hoc clear">

    <div> 

      <!-- ################################################################################################ -->

      <h2 class="heading">Canopus</h2>

      <p>우리는 길을 찾아야 합니다. Canopus는 당신의 길잡이가 되어 줄 것입니다.</p>

      <p> 그러니 Canopus를 찾고, 닿으세요.</p>

      <p>그것 만이 목표입니다.</p>

      

      <!-- ################################################################################################ -->

    </div>

  </section>

  <!-- ################################################################################################ -->

</div>

<!-- End Top Background Image Wrapper -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- Area Introduce Creator################################################################################################ -->

<div class="wrapper row2">

  <section class="hoc container clear"> 

    <!-- ################################################################################################ -->

    <div class="sectiontitle">

      <h6 class="heading">Introduce Creator</h6>

      <p>좋은 게임을 만들기 위해 당신이 생각하지 못한 이상한 방향으로 노력하는 게임 제작자입니다.</p>

    </div>

    <ul class="nospace group services">

      <li class="first">

        <article><a href="#"><img  src="images/icon/CreatorIcon.jpg" ></a>

          <h6 class="heading font-x1"><a href="#">Creator</a></h6>

          <p>안녕하세요. 저는 Canopus를 만든 2bbear입니다.</p>

          <p>먼저 이렇게 Canopus를 하기 위해 방문해주셔서 감사합니다.</p>

          <p>저는 게임 프로그래머로써 게임에 다양한 시도를 통해 연구를 하고 있습니다.</p>

          <p>궁금한 것이 있다면 사이트 하단의 메일로 연락을 주세요.</p>

        </article>

      </li>

      

    </ul>

    <!-- ################################################################################################ -->

    <div class="clear"></div>

  </section>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!--  Area Game ################################################################################################ -->

<div class="wrapper row3">

  <main class="hoc container clear"> 

<div class="wrapper" id="mainarea">

<div class="alert alert-warning centered-axis-xy" style="min-height: 20px; display:none;" role="alert" id="compilingmessage">

<div id='loadTasks'> </div>

</div>

<canvas id="canvas" class="emscripten" oncontextmenu="event.preventDefault()" style="display:none;">

</div>

<div style="text-align:center;">

<div >

<button type="button" class="btn btn-primary" onclick="Module['pauseMainLoop']();">Pause</button>

<button type="button" class="btn btn-primary" onclick="Module['resumeMainLoop']();">Resume</button>

<button type="button" class="btn btn-primary" id="fullscreen_request">FullScreen</button>

</div>

</div>

<div class="texthalf text-normal jumbotron " id="logwindow" style='display:none'></div>


<script src="MYCONTENTS\HTML5\HowToMakeHTML5.UE4.js"></script>

  </main>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- Area Mailing################################################################################################ -->

<div class="wrapper row4 bgded overlay" style="background-image:url('images/demo/backgrounds/02.png');">

  

  

  <footer id="footer" class="hoc clear"> 

    <!-- ################################################################################################ -->

    <div id="pageintro" class="hoc clear" >

      <h6 class="heading">Aliquam non fermentum</h6>

      <ul class="nospace btmspace-30 linklist contact">

        <li><i class="fa fa-phone"></i> +82 (10) 5948 5781</li>

        <li><i class="fa fa-envelope-o"></i> jjh.twobbear@gmail.com</li>

      </ul>

      <ul class="faico clear">

<li>

<form class="gform pure-form pure-form-stacked" method="POST" data-email="example@email.net" action="이건 보여줄 수 없엇! 보지맛! ">

    <!-- change the form action to your script url -->

    <div class="form-elements">

      <fieldset class="pure-group">

        <label for="name">Name: </label>

        <input id="name" name="name" placeholder="What your Mom calls you" />

      </fieldset>

      <fieldset class="pure-group">

        <label for="message">Message: </label>

        <textarea id="message" name="message" rows="10"

        placeholder="Tell us what's on your mind..."></textarea>

      </fieldset>

      <fieldset class="pure-group">

        <label for="email"><em>Your</em> Email Address:</label>

        <input id="email" name="email" type="email" value=""

        required placeholder="your.name@email.com"/>

        <span class="email-invalid" style="display:none">

          Must be a valid email address</span>

      </fieldset>

      

      <button class="button-success pure-button button-xlarge">

        <i class="fa fa-paper-plane"></i>&nbsp;Send</button>

    </div>

    <!-- Customise the Thankyou Message People See when they submit the form: -->

    <div class="thankyou_message" style="display:none;">

      <h2><em>Thanks</em> for contacting us!

        We will get back to you soon!</h2>

    </div>

  </form>

 

</li>

      </ul>

    </div>

 

    <!-- ################################################################################################ -->

  </footer>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<div class="wrapper row5">

  <div id="copyright" class="hoc clear"> 

    <!-- ################################################################################################ -->

    <p class="fl_left">Copyright &copy; 2019 - All Rights Reserved - <a href="#">Jungho's game</a></p>

    <!-- ################################################################################################ -->

  </div>

</div>

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<!-- ################################################################################################ -->

<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>

<!-- JAVASCRIPTS -->

<script src="layout/scripts/jquery.min.js"></script>

<script src="layout/scripts/jquery.backtotop.js"></script>

<script src="layout/scripts/jquery.mobilemenu.js"></script>

</body>

</html>

ue4 게임을 이 index.html에 올리기 위하여  js와 data, 그리고 음원을 넣기 위해 wasm을 밖으로 빼내야만 했습니다. 아니면 직접 HowToMakeHTML5.js파일을 수정해줘야 할 것 같은데. 저 파일이 이상한건지 열려고만 하면 너무 렉이 걸리고 힘들어서 그냥 포기하기로 했습니다.


나중에 ue4 빌드 세팅쪽을 건드려서 다시 수정해보면 될 것 같습니다.




이렇게 수정하고....


이 안에 ue4 게임, 구글 이메일 보내는 기능이 들어가 있습니다.

그렇게해서 이렇게 게임용 웹 사이트를 만들었습니다.


엉망진창인거 같은데....이제 게임쪽 만들어야 해서 더 이상 웹은 만지기 싫습니다. 으으....

역시 전 퍼블리셔와 적성이 안 맞는거 같아요.


차라리 쓰레드를 만지고 패킷을 더 만지는게 좋을 것 같네요.

'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

8. 언리얼4에 ui로 영상을 출력해보자 - UI 인트로 편  (2) 2019.01.07
7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
5. HTML로 이메일 보내는 기능 추가하기  (2) 2019.01.02
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02

자바 서블릿을 사용해보자

WebDegine/Web2019. 1. 2. 17:19

서블릿이란?


JSP 파일의 수명


Java Servlet은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램 혹은 그 사양을 말하며, 흔히 서블릿이라 불린다.

서블릿은 웹 서버의 성능을 향상하기 위해 사용되는 자바 클래스의 일종이다.

서블릿은 JSP와 비슷한 점이 있지만, JSP가 HTML 문서 안에 Java 코드를 포함하고 있는 반면, 서블릿은 자바 코드 안에 HTML을 포함하고 있다는 차이점이 있다.

- 위키백과


============================================================

아무튼 이번에 만들려고 하는 것은 html에서 gmail로 이메일을 보내는 기능이다!


HTML 또는 JSP로 만든 파일에서 버튼을 누를 경우 서블릿으로 만든 것에 접속하는 방식으로 데이터를 처리할 것이다.!


1. 서블릿으로 gmail을 보내는 기능을 만들자!

참고 : http://it77.tistory.com/208


JAF 프레임워크 가 필요하다 https://www.oracle.com/technetwork/java/jaf11-139815.html

JavaMail 라이브러리가 필요하다! https://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-eeplat-419426.html#javamail-1.4.5-oth-JPR


사랑해요 오라클!


두 라이브러리를 다운받아 프로젝트의 적당한 곳에 넣어둔다.


난 그냥 막 넣었다. 

근데 javamail 폴더 안에 demo가 있는데 그거 오류나니 그 폴더만 삭제했다.

추가로 java 본래 jre-lib폴더에 들어가서 mail.jar 파일을 넣어줘야 한다.


package mailer;
 
import java.io.IOException;
import java.util.Properties;
 
import javax.mail.Authenticator;
import javax.mail.Message;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class SendMail
 */
public class SendMail extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SendMail() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
 
        request.setCharacterEncoding("UTF-8");
 
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
 
        String m_name =     request.getParameter("name");
        String m_email =    request.getParameter("email");
        String m_title =    request.getParameter("title");
        String m_text =     request.getParameter("text");
 
        try {
            String mail_from =  m_name + "<" + m_email + ">";
            String mail_to =    "admin<admin@83rpm.com>";
            String title =      "hosting.83rpm.com 요청사항 :: " + m_title;
            String contents =   "보낸 사람 :: " + m_name + "&lt;" + m_email + "&gt;<br><br>" + m_title + "<br><br>" + m_text;
 
            mail_from = new String(mail_from.getBytes("UTF-8"), "UTF-8");
            mail_to = new String(mail_to.getBytes("UTF-8"), "UTF-8");
 
            Properties props = new Properties();
            props.put("mail.transport.protocol", "smtp");
            props.put("mail.smtp.host", "smtp.gmail.com");
            props.put("mail.smtp.port", "465");
            props.put("mail.smtp.starttls.enable", "true");
            props.put("mail.smtp.socketFactory.port", "465");
            props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
            props.put("mail.smtp.socketFactory.fallback", "false");
            props.put("mail.smtp.auth", "true");
 
            Authenticator auth = new SMTPAuthenticator();
 
            Session sess = Session.getDefaultInstance(props, auth);
 
            MimeMessage msg = new MimeMessage(sess);
 
            msg.setFrom(new InternetAddress(mail_from));
            msg.setRecipient(Message.RecipientType.TO, new InternetAddress(mail_to));
            msg.setSubject(title, "UTF-8");
            msg.setContent(contents, "text/html; charset=UTF-8");
            msg.setHeader("Content-type", "text/html; charset=UTF-8");
 
            Transport.send(msg);
 
            response.sendRedirect("request_complete.jsp");
        } catch (Exception e) {
            response.sendRedirect("request_failed.jsp");
        } finally {
 
        }
    }
 
}


출처: http://it77.tistory.com/208 [시원한물냉의 사람사는 이야기] 

서블릿 코드


이 코드에서 원하는 부분만 가져가서 자기 코드에 추가해보자.

일단 import하다가 터질텐데 이유는 jar 라이브러리 추가를 안해줬으니까!!!! jar 추가는 프로젝트 폴더 build path에서 라이브러리에 추가하면 된다.


package mypack;


import javax.mail.PasswordAuthentication;

import javax.mail.Authenticator;



public class SMTPAuthenticator extends Authenticator {

public SMTPAuthenticator() {

        super();

    }

 

    public PasswordAuthentication getPasswordAuthentication() {

        String username = "지메일주소";

        String password = "지메일암호";

        return new PasswordAuthentication(username, password);

    }


} 

SMTPAuthenticator.java 파일 코드


Authenticator를 상속받는 이러한 인증객체를 따로 구현한 다음 위 서블릿 클래스와 같은 디렉토리에 넣어준다. 이 서블릿 클래스에 파라미터로 name, email, title, text 파라미터를 주면 설정된 메일 주소로 메일을 보내게 된다. 받는 사람도 따로 받고 싶다면 역시 파라미터로 받으면 된다.




'WebDegine > Web' 카테고리의 다른 글

jQuery Plugin 사용법  (0) 2019.01.02
Jquery 기본적인 사용법  (0) 2019.01.01
[CSS] 부트스트랩 사용법  (0) 2018.12.31

5. HTML로 이메일 보내는 기능 추가하기

중단한 프로젝트/WebGameProject(중단)2019. 1. 2. 11:46

이번에는 이메일을 보내는 기능을 추가해봅시다.


전달 받는 사람은 바로 사이트 게시자인 나일테고 보내는 사람은 불특정 다수가 될테니


보여지면 안되는 것

- 내 이메일


보여져야 하는 것

- 보내는 사람의 이메일

- 내용

- 보내는 날짜


============================================================

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how

서버없이 구글 api 이메일을 보내는 샘플

============================================================


기본적으로 server가 있어야하며 스팸방지 기능도 넣어야하고....구글 api에서 키도 받아와야하고...그런데 더 쉬운 방법이 있는거 같고....


백엔드 서버 없이 그냥 이메일을 보내는 것이 있다는 것 같은데. 나는 백엔드 서버를 이용해서 이메일을 보내고 싶은데.


그렇게 보내지 않아도 일단 기능적으로 실행 할 수 있는 정적 HTML email 보내는 방법이 있습니다.

참고 : 

https://kutar37.tistory.com/entry/%EC%A0%95%EC%A0%81-HTML-form%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-%EB%A9%94%EC%9D%BC%EB%B3%B4%EB%82%B4%EA%B8%B0-Google-Apps-Mail


1. html 코드

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="contact form example">

  <title>Contact Form Example</title>

</head>


<body>

  <h2 class="content-head is-center">Contact Us!</h2>

  <aside>

       <p>

           We would <em>love</em> to hear from you! </p>

           <p>Please use the <b><em>Contact Form</em></b>

           to send us a message.

       </p>

   </aside>


<!-- START HERE -->

   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

   <!-- Style The Contact Form How Ever You Prefer -->

   <link rel="stylesheet" href="style.css">


  <form class="gform pure-form pure-form-stacked" method="POST" data-email="example@email.net"

  action="여기에 스프레드 시트를 통해 얻은 주소를 넣어주세요">

    <!-- change the form action to your script url -->


    <div class="form-elements">

      <fieldset class="pure-group">

        <label for="name">Name: </label>

        <input id="name" name="name" placeholder="What your Mom calls you" />

      </fieldset>


      <fieldset class="pure-group">

        <label for="message">Message: </label>

        <textarea id="message" name="message" rows="10"

        placeholder="Tell us what's on your mind..."></textarea>

      </fieldset>


      <fieldset class="pure-group">

        <label for="email"><em>Your</em> Email Address:</label>

        <input id="email" name="email" type="email" value=""

        required placeholder="your.name@email.com"/>

        <span class="email-invalid" style="display:none">

          Must be a valid email address</span>

      </fieldset>


      <fieldset class="pure-group">

        <label for="color">Favourite Color: </label>

        <input id="color" name="color" placeholder="green" />

      </fieldset>


      <button class="button-success pure-button button-xlarge">

        <i class="fa fa-paper-plane"></i>&nbsp;Send</button>

    </div>


    <!-- Customise the Thankyou Message People See when they submit the form: -->

    <div class="thankyou_message" style="display:none;">

      <h2><em>Thanks</em> for contacting us!

        We will get back to you soon!</h2>

    </div>


  </form>


  <!-- Submit the Form to Google Using "AJAX" -->

  <script data-cfasync="false" type="text/javascript"

  src="form-submission-handler.js"></script>

<!-- END -->


</body>

</html>

 


위 참고 주소를 통해 따라하면 이메일을 받아 볼 수 있다. 



2. 이제 내 프로젝트에 넣어보자.


<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="EUC-KR">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>Jungho's Game - Brain Paralyzer</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>


    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            navigateByClick : false,

            imageAlignCenter: true,

            transitionSpeed : 3000,

            autoPlay: {

                enabled: false,

                pauseOnHover : true,

                delay : 5000

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

            #backgorun-page{

           

            width:100%;

            height: 100%;

            background: #141e39;}

            

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

#content-slider .rsThumbs { background: #141e39;}


#slide-3{}

.button-sendmail{ font-size:400px;}

#slide-4-out{

  text-align: center;

  }

  #slide-4-in{

    width: 70%;

  height: 70%;

  margin: 40px auto;

  background: red;

  }


   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="backgorun-page">

    <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height: 950px; width: 100%;" >

      

      <div>

      <img class="rsIgm" src="img\GameIntro.jpg" alt="" style="width:100%">

      

      </div>

      <div>

<img class="rsIgm" src="img\CreatorIntro.jpg" alt="" style="width:100%">

</div>

      <div id="slide-3" >slide3

     

      </div>

     

    </div>

    <div>

      <h2 class="content-head is-center">Contact Us!</h2>

  <aside>

       <p>

           We would <em>love</em> to hear from you! </p>

           <p>Please use the <b><em>Contact Form</em></b>

           to send us a message.

       </p>

   </aside>

<!-- START HERE -->

   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

   <!-- Style The Contact Form How Ever You Prefer -->

   <link rel="stylesheet" href="learn-to-send-email-via-google-script-html-no-server-master\style.css">

  <form class="gform pure-form pure-form-stacked" method="POST" data-email="example@email.net"

  action="으잌 이건 안보여줄꺼지롱">

    <!-- change the form action to your script url -->

    <div class="form-elements">

      <fieldset class="pure-group">

        <label for="name">Name: </label>

        <input id="name" name="name" placeholder="What your Mom calls you" />

      </fieldset>

      <fieldset class="pure-group">

        <label for="message">Message: </label>

        <textarea id="message" name="message" rows="10"

        placeholder="Tell us what's on your mind..."></textarea>

      </fieldset>

      <fieldset class="pure-group">

        <label for="email"><em>Your</em> Email Address:</label>

        <input id="email" name="email" type="email" value=""

        required placeholder="your.name@email.com"/>

        <span class="email-invalid" style="display:none">

          Must be a valid email address</span>

      </fieldset>

      <fieldset class="pure-group">

        <label for="color">Favourite Color: </label>

        <input id="color" name="color" placeholder="green" />

      </fieldset>

      <button class="button-success pure-button button-xlarge">

        <i class="fa fa-paper-plane"></i>&nbsp;Send</button>

    </div>

    <!-- Customise the Thankyou Message People See when they submit the form: -->

    <div class="thankyou_message" style="display:none;">

      <h2><em>Thanks</em> for contacting us!

        We will get back to you soon!</h2>

    </div>

  </form>

  <!-- Submit the Form to Google Using "AJAX" -->

  <script data-cfasync="false" type="text/javascript"

  src="form-submission-handler.js"></script>

<!-- END -->

     </div>

    </div>

    

  </body>

</html> 


억지로 집어 넣었는데 안 이뻐..




'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02
2. 웹페이지 디자인/기획  (0) 2019.01.01

티스토리툴바