PUYOPUYO: 2016

2016년 5월 1일 일요일

프로세싱 닷지 게임

Processing 3 환경에서 만든 미사일 피하기 게임입니다.

마우스 좌클릭: 탄환 발사
마우스 우클릭: 폭탄 사용

총알을 발사해서 적을 없애보세요.
폭탄을 이용해 시간을 잠시 벌어보세요.

2016년 4월 23일 토요일

fullScreen()

프로세싱 3.0 버전에서 새로 나온 기능입니다.

화면을 풀스크린 상태로 만들어줍니다.

또한 여러개의 모니터를 사용하는 경우에도

메서드에 입력하는 숫자를 늘려가며 풀스크린 사용이 가능합니다.

여러개의 화면을 통합하여 출력할 경우에는 fullScreen(SPAN) 을 입력합니다.

setup() 안에 넣어 사용하면 별도의 과정 없이 사용자의 해상도에 맞게 풀스크린상태로

프로그램이 실행됩니다.

이 메서드는 3.0 이전 버전에서 사용되던 기존의 size() 와 동시에 사용이 불가능합니다.

예제 코드)

void setup()
{
fullScreen();
}

만약, 화면의 크기를 변경하고 싶다면

다음의 코드를 setup() 안에 추가해야 합니다.

surface.setResizable(true);

그 후

surface.setSize(x,y);

를 이용하여 유동적으로 화면 크기를 변경할 수 있습니다.

예제 코드)

int resolution_x=1680;
int resolution x=1050;
void setup()
{
fullScreen();

surface.setResizable(true);
surface.setSize(resolution_x, resolution_y);

}

단, 크기를 변경하여도 화면상단에 붙은 채로 크기만 변할 뿐 창모드로 변경이 불가능합니다.

예전의 방식대로 창모드에서 크기를 변환하고 싶다면 fullScreen() 대신 size()를 사용한 후 사용하면 됩니다. ( 3.0 버전 이후 size()를 사용할려면 setup() 이 아닌 settings()에 size()를 넣어 사용해야 합니다.)

예제 코드)

int resolution_x=1680;
int resolution_y=1050;

void settings()
{
size(400,400);
}

void setup()
{
surface.setResizable(true);
surface.setSize(resolution_x, resolution_y);
}

reference 원문

Name

fullScreen()

Examples

// Run the code at the full dimensions of the screen currently
// selected inside the Preferences window

int x = 0;

void setup() {
  fullScreen();
  background(0);
  noStroke();
  fill(102);
}

void draw() {
  rect(x, height*0.2, 1, height*0.6); 
  x = x + 2;
}

// If more than one screen is attached to the computer, run the 
// code at the full dimensions on the screen defined by the 
// parameter to fullScreen()

int x = 0;

void setup() {
  fullScreen(2);
  background(0);
  noStroke();
  fill(102);
}

void draw() {
  rect(x, height*0.2, 1, height*0.6); 
  x = x + 2;
}

// Run full screen using the P2D renderer on screen 2

int x = 0;

void setup() {
  fullScreen(P2D, 2);
  background(0);
  noStroke();
  fill(102);
}

void draw() {
  rect(x, height*0.2, 1, height*0.6); 
  x = x + 2;
}

// If more than one screen is attached to the computer, run the 
// code at the full dimensions across all of the attached screens

int x = 0;

void setup() {
  fullScreen(P2D, SPAN);
  background(0);
  noStroke();
  fill(102);
}

void draw() {
  rect(x, height*0.2, 1, height*0.6); 
  x = x + 2;
}

Description

This function is new for Processing 3.0. It opens a sketch using the full size of the computer's display. This function must be the first line in setup(). The size() and fullScreen() functions cannot both be used in the same program, just choose one.

When fullScreen() is used without a parameter, it draws the sketch to the screen currently selected inside the Preferences window. When it is used with a single parameter, this number defines the screen to display to program on (e.g. 1, 2, 3...). When used with two parameters, the first defines the renderer to use (e.g. P2D) and the second defines the screen. The SPAN parameter can be used in place of a screen number to draw the sketch as a full-screen window across all of the attached displays if there are more than one.

Prior to Processing 3.0, a full-screen program was defined with size(displayWidth, displayHeight).

Syntax

fullScreen()
fullScreen(display)
fullScreen(renderer)
fullScreen(renderer, display)

Parameters

renderer	String: the renderer to use, e.g. P2D, P3D, JAVA2D (default)
display	int: the screen to run the sketch on (1, 2, 3, etc. or on multiple screens using SPAN)

Returns

void

settings()
setup()
smooth()

참조

https://processing.org/reference/fullScreen_.html

https://github.com/processing/processing/wiki/Window-Size-and-Full-Screen-for-Processing-2.0

학습 목적으로 작성한 글이므로 자세하지 않거나 틀린 부분이 있을 수 있습니다.

자세한 정확한 정보는 원문을 보고 확인하시길 바랍니다.

프로세싱 cursor() 설명

cursor()

커서의 모양을 지정합니다.

cursor(kind) 형태로 사용할 경우

화살표, 십자가, 손모양 파라메터에 나온 종류 중에서 고를 수 있습니다.

cursor(img) 형태로 사용할 경우

PImage에 저장한 그림으로 커서 모양을 사용할 수 있습니다.

cursor(img,x,y) 형태로 사용할 경우

x,y 를 지정하여 클릭할 경우 커서 내 어떤 부분이 클릭 될지 결정할 수 있습니다.

x,y 값은 커서 이미지의 크기보다 작은 값이 되어야 합니다.

예) 사용자가 불러들인 img의 크기가 16*16 이고 클릭시 그 이미지 중앙 지점이

실제 클릭된 부분으로 하고 싶을 경우 curosr(img,8,8) 과 같이 적으면 됩니다.

예제 코드)

PImage img;
void setup()
{
size(400,400);
img=loadImage("cursor_img.png");

}

void draw()
{
if (mouseX < 200)
cursor(CROSS);
else
cursor(img,8,8);
}

사용자 지정 이미지 사용시에는 16*16 또는 32*32 픽셀 이미지를 불러들여 사용할 것을 추천하며
웹과 같은 다른 환경에서 제대로 동작하지 않을 경우 x,y 값을 반드시 이미지 픽셀 크기보다 작게 설정하길 바랍니다.

P2D, P3D 렌더 설정에서는 OpenGL이 기본 커서에 대한 접근을 가능하게 해놓지 않았으므로 (Issue 3791) 기본 커서로 사용하길 바랍니다.

Name

cursor()

Examples

// Move the mouse left and right across the image
// to see the cursor change from a cross to a hand

void draw() 
{
  if (mouseX < 50) {
    cursor(CROSS);
  } else {
    cursor(HAND);
  }
}

Description

Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden. If you are trying to set an image as the cursor, the recommended size is 16x16 or 32x32 pixels. It is not possible to load an image as the cursor if you are exporting your program for the Web, and not all MODES work with all browsers. The values for parameters x and y must be less than the dimensions of the image.

Setting or hiding the cursor does not generally work with "Present" mode (when running full-screen).

With the P2D and P3D renderers, a generic set of cursors are used because the OpenGL renderer doesn't have access to the default cursor images for each platform (Issue 3791).

Syntax

cursor(kind)
cursor(img)
cursor(img, x, y)
cursor()

Parameters

kind	int: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT
img	PImage: any variable of type PImage
x	int: the horizontal active spot of the cursor
y	int: the vertical active spot of the cursor

Returns

void

noCursor()

참조: https://processing.org/reference/cursor_.html

학습 목적으로 작성한 글이므로 자세하지 않거나 틀린 부분이 있을 수 있습니다.

자세한 정확한 정보는 원문을 보고 확인하시길 바랍니다.

Processing에서 화면에 한글 출력하기

processing 3.0.2 버전을 기준으로 작성하였습니다.
학습 목적으로 작성된 문서이므로 자세하지 못하거나 틀린 부분이 있을 수도 있다는 점을 알려드립니다.

설명에 앞서 파일(file)-환경설정(preferences)에 들어가서

언어(language): 한국어
에디터 및 콘솔 폰트(editor and console font): 돋움체

를 선택해주세요.
시스템 메뉴와 코드가 한국어로 보이게 하기 위한 설정입니다.

PFont myFont;
void setup() {
size(400, 200);
// Uncomment the following two lines to see the available fonts
String[] fontList = PFont.list();
printArray(fontList);

myFont = createFont("한초롬바탕", 32);
textFont(myFont);
textAlign(CENTER, CENTER);
text(" 가나다라마바사아", width/2, height/2);
}

일단 위 코드를 복사해서 프로세싱의 스케치에 붙여넣어 실행해보세요.

그러면 콘솔창에
c: windows\fonts 에 설치된 폰트목록이 쭉 보입니다.

여러분이 복사 붙여넣기 한 코드에는 이 중 '함초롱바탕' 이라는 글꼴로 화면에 출력하기 위해서

myFont = createFont("한초롬바탕", 32);

라고 적은 것을 확인 할 수 있습니다.

만약, 다른 글꼴로 글자가 화면에 출력되게 하고 싶다면 콘솔창에 뜬 글꼴 중에 원하는 것을 골라서 다른 것을 적으시면 되고
글꼴을 직접 확인해보고 싶다면 c: windows\fonts 경로로 찾아가서 확인하면 됩니다.

코드를 실행해보면 다음과 같은 결과물을 얻을 수 있습니다.

간단한 설명은 위와 같고 코드를 아주 조금만 자세히 설명해보겠습니다.

PFont myFont;

폰트를 저장하기 위한 변수입니다.

void setup() { }

프로그램이 시작될 때 단 한번만 실행되는 함수입니다.
주로 화면 크기, 폰트 크기, 프레임 등과 같은 코드들이 여기에 적힙니다

size(400, 200);

화면의 크기를 지정합니다.
순서대로 가로, 세로 화면크기 수치를 의미합니다.

// Uncomment the following two lines to see the available fonts
String[] fontList = PFont.list();
printArray(fontList);

c:windows\fonts 에 설치된 폰트 목록을 불러와서 콘솔창에 출력하기 위한 코드입니다.

myFont = createFont("한초롬바탕", 32);

PFont 자료형 myFont라는 이름의 변수에
createFont 메서드를 이용하여 새로운 글꼴과 그 크기를 저장합니다.
이 코드의 결과로 myFont 변수에 글꼴은 함초롱바탕 크기는 32 라는 값이 저장됩니다.

textFont(myFont);

다음 코드부터 출력되는 문자는
myFont에 저장된 값 설정대로 출력됩니다.

textAlign(CENTER, CENTER);

다음 코드부터 출력되는 문자는 x, y 모두 가운대로 정렬되어 출력됩니다.

text(" 가나다라마바사아", width/2, height/2);

문자열 "가나다라마바사아" 를

x축 width/2 지점(가로 중앙)
y축 height/2 지점(세로 중앙)

에 출력합니다.

참조한 원문은 아래에서 확인할 수 있습니다.

https://processing.org/reference/createFont_.html

PUYOPUYO

태그

2016년 5월 1일 일요일

프로세싱 닷지 게임

2016년 4월 23일 토요일

프로세싱 fullScreen() 설명

fullScreen()

reference 원문

fullScreen()

프로세싱 cursor() 설명

cursor()

cursor()

Processing에서 화면에 한글 출력하기

프로세싱