2Bbear's knowledge workshop

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

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

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


해결 방법 :

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



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

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

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


해결 방법:

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




결론 :

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


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

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

destroy(this) 라던지...



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

평가 : 

프로젝트 난이도 - 중

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


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

잃은 것 - 시간.....

Comment +0

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

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



문제

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

...

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

Comment +0

만들어야 할 것

- 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



Comment +2

준비물 : 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편 끝.






Comment +1

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 게임, 구글 이메일 보내는 기능이 들어가 있습니다.

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


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

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


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

Comment +0

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


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


보여지면 안되는 것

- 내 이메일


보여져야 하는 것

- 보내는 사람의 이메일

- 내용

- 보내는 날짜


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

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> 


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




Comment +2

넣는 코드

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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


    <title>RoyalSlider Example</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,

            

            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 */

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

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

            #slide_1,

#slide_1 .rsOverflow,

#slide_1 .rsSlide,

#slide_1 .rsVideoFrameHolder,

#slide_1 .rsThumbs { background: #141e39;}

#slide_2,

#slide_2 .rsOverflow,

#slide_2 .rsSlide,

#slide_2 .rsVideoFrameHolder,

#slide_2 .rsThumbs {background: #141e39;}

   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <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>slide3</div>

      <div>slide4</div>

    </div>


    


  </body>

</html>


이렇게 넣고 프로젝트에도 이미지 파일을 넣어 놓으면 이미지가 출력된다.



문제점


이렇게 통 이미지로 할 경우 원하는 형태로 꾸미기에는 좋지만 이후 수정하기가 여간 까다로운 것이 아니다.


따라서 슬라이드 안의 요소들을 각각 수정 가능한 형태로 바꾸어야 한다.

그런데 일단 이렇게 통 이미지로 한 이유가 글자 폰트가 망가져서 그런건데. 

글자만 따로 출력하는 것으로 이 문제를 해결 할 수 있을까?...


일단은 개발 속도를 위해 통 이미지를 그대로 사용하여 페이지를 장식하고 그 뒤에 시간이 남으면 요소들을 잘라보기로 해야겠다.


Comment +0

준비물

royalslider plugin - 구글에서 검색하시거나, 돈주고 사시면 됩니다.


http://dimsemenov.com/plugins/royal-slider/documentation/

royalslider plugin API가 나와 있는 사이트입니다.


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

1. royalslider plugin을 자신의 웹 프로젝트에 추가합니다.


아마 올바르게 들어가지 않을 수도 있는데 그럴 경우 잘못 압축이 해제된 결과이니 다시 다른걸 다운 받아주세요


2. 예시 코드

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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


    <title>RoyalSlider Example</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',

            autoPlay: {

                enabled: true

            },

            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 */

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault">

      <div>slide1</div>

      <div>slide2</div>

      <div>slide3</div>

    </div>


    


  </body>

</html>


가로로 슬라이드 되는 예시 코드입니다. 이제 이걸 세로로 바꾸면 됩니다.


2. 가로인 슬라이드 코드를 세로로 바꿔보기

어떻게 하는지 찾아보니

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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


    <title>RoyalSlider Example</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',

            autoPlay: {

                enabled: true

            },

            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 */

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault">

      <div>slide1</div>

      <div>slide2</div>

      <div>slide3</div>

    </div>


    


  </body>

</html> 


저렇게 옵션 값을 추가해서 바꾸면 된다고 한답니다.


3. 이제 화면 전체적으로 슬라이드를 할 수 있게 꽉채워 봅시다.

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


음...아무래도 슬라이드 상으로는 가로 비율만 정의 할 수 있나봅니다. 세로는 비율이 안되고 px 값으로만 되는 듯 합니다.


4. 화살표가 있는게 거슬리네요 건드릴때만 나오도록 숨겨봅시다. 또 자동 전환 속도가 너무 빨라요 변경되는 시간에 8초 정도 걸리도록 해놔야겠네요

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


        // slider initialization

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

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            transitionSpeed : 3000,

            autoPlay: {

                enabled: true

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });


5. 자동 전환이 글을 읽는 도중에도 넘어가니 그걸 중지해야합니다. 마우스 커서가 올라가 있으면 자동으로 못 넘기게 합시다. 추가로 항목간 지연 시간을 5초 정도로 늘려줍시다.

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


        // slider initialization

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

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            transitionSpeed : 3000,

        

            autoPlay: {

                enabled: true,

                pauseOnHover : true,

                delay : 5000

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });


6. 이제 배경화면을 넣어봅시다.

    </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 */

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

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

            #slide_1,

#slide_1 .rsOverflow,

#slide_1 .rsSlide,

#slide_1 .rsVideoFrameHolder,

#slide_1 .rsThumbs { background: #141e39;}

#slide_2,

#slide_2 .rsOverflow,

#slide_2 .rsSlide,

#slide_2 .rsVideoFrameHolder,

#slide_2 .rsThumbs {background: #141e39;}

   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

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

      

      <div>slide1</div>

      <div >slide2</div>

      <div>slide3</div>

      <div>slide4</div>

    </div>

 


각 슬라이드에도 색상을 넣을 수 있는데 그건 비효율 적이니 안하고 slide_1이런거 쓰면 됩니다.

기본적으로 전체 색상을 잡아주기 위하여 content_slider에 색상을 추가했습니다.


7. 이제 테스트로 첫 슬라이랑 두번째 슬라이드 요소들을 채워 넣어봅니다.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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


    <title>RoyalSlider Example</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,

            transitionSpeed : 3000,

        

            autoPlay: {

                enabled: true,

                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 */

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

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

            #slide_1,

#slide_1 .rsOverflow,

#slide_1 .rsSlide,

#slide_1 .rsVideoFrameHolder,

#slide_1 .rsThumbs { background: #141e39;}

#slide_2,

#slide_2 .rsOverflow,

#slide_2 .rsSlide,

#slide_2 .rsVideoFrameHolder,

#slide_2 .rsThumbs {background: #141e39;}

   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

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

      

      <div>

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

      

      </div>

      <div>slide2</div>

      <div>slide3</div>

      <div>slide4</div>

    </div>


    


  </body>

</html> 



글자를 넣으려고하니 좌표를 직접 잡아줘야 해서 굉장히 짜증나네요. 이럴때 슬라이드의 장점을 살려봅시다. 

어차피 한 화면씩 나오니 차라리 포토샵으로 그림이고 뭐고 다 해서 이미지 통째로 올려버리는 거죠 꺄르르르르르


Comment +0