Getting Started

Formula Input에서는 간단한 수식부터 변수, 함수를 활용한 가변적인 값이나 레이어의 x, y, width, height 같은 속성값을 참조 할 수 있습니다. 이를 활용하면 인터랙션을 보다 역동적이고 간결하게 만들 수 있습니다.

Formula Input

사칙연산에 레이어의 속성을 참조해서 가변적인 수치를 입력할 수 있는 입력기입니다. 변수와 함수를 함께 사용할 수도 있습니다. Property input의 펼치기 버튼 을 누르면 나타나고 수식 입력을 위한 자동완성 기능을 사용할 수 있습니다.

Formula Input

Basic Tutorials

Formula

Formular기능의 기본적인 사용법입니다. Response에 값을 넣을 때 레이어의 좌표를 직접 참조하여 고정된 값으로만 변하는 인터랙션이 아니라 동적으로 상황에 따라 변하는 인터랙션을 만들 수 있습니다.

Variable

Variable의 기본적인 사용법입니다. Variable에는 숫자, 문자, 컬러 값을 할당 할 수 있고, assign response를 사용해서 variable의 값을 변경하고 그에 따라 변하는 인터랙션을 만들 수 있습니다.

Exmaples

Tab Menu

Response 의 수치값에 고정된 숫자가 아닌 수식을 입력할 수 있으며, 다른 레이어 속성을 수식에 사용할 수 있습니다. 파란색 layer를 Menu2위치로 옮기고 싶을 때 `Menu2`.x와 같이 쓸 수 있습니다.

Spinner

변수를 사용해서 1씩 증가하거나 1씩 감소하는 spinner를 만들 수 있습니다.

Ripple Effect

Predefined Variable을 사용해서 화면을 Touch하는 지점의 좌표값을 가져올 수 있습니다. 내가 Touch하는 지점으로부터 Ripple Effect가 생기게 만들고 싶다면 Ripple layer의 Move response의 좌표에 각각 $touchX, $touchY 를 입력할 수 있습니다.

Text Input

`layerName`.text 속성을 사용하면 Text Input 에 입력된 텍스트 값을 참조할 수 있습니다. Formula input에서 문자열 연산으로 다른 문자열과 조합할 수도 있습니다.

Variable

변수를 생성할 수 있습니다. 변수에는 Text, Number, Color 값을 넣을 수 있습니다. Assign Response 를 사용해서 변수의 값을 변경 할 수 있고, Detect Trigger 를 사용해서 변수의 값이 변경되었을 때 동작하는 interaction을 만들 수 있습니다. Response를 사용할 때 property에 고정된 숫자 대신 변수를 직접 입력해서 Move, Scale, Rotate등의 값을 바꿀 수도 있습니다.

Variable for all scenes
ProtoPie의 모든 Scene에서 사용할 수 있는 변수입니다. Scene간 인터랙션을 만들 때 활용할 수 있습니다. 예를들어 A scene에서 “Variable for all scenes”의 값을 바꾸고, B scene에서 바뀐 값에 반응하도록 만들 수 있습니다.
Variable for this scene only
변수를 생성한 Scene내에서만 사용 가능한 지역 변수입니다. A라는 scene에서 만든 변수를 B scene에서 사용할 수 없습니다. 각 scene별로 변수의 값을 독립적으로 활용할 때 사용합니다.

Variable Type

변수는 저장할 수 있는 값의 타입을 가집니다. Text, Number, Color 타입 중 하나를 지정할 수 있으며, 값을 저장하거나 사용할 때 지정된 타입에 맞게 동작합니다.

Text
문자열 형식의 값만 사용이 가능합니다. 숫자를 할당하더라도 시스템은 문자열로 인식하게 됩니다.
Number
숫자 형식의 값만 사용이 가능합니다. 문자열을 할당하면 error가 발생합니다.
Color
#FFFFFF 형식의 color값만 사용이 가능합니다. 다른 형식의 값을 사용하면 error가 발생합니다.

Variable Display

변수의 값을 화면에 표시할 수 있습니다. 변수에 의도한 값이 제대로 할당되고 있는지 확인하는 용도로 사용할 수 있습니다.

Predefined Variable

ProtoPie내부에 미리 만들어져 있는 변수입니다. 마우스 포인터의 좌표 혹은 Mobile에서의 Keyboard높이값 등을 가져올 수 있습니다.

  • $touchX 화면을 Touch했을 때 X좌표를 얻을 수 있습니다.
  • $touchY 화면을 Touch했을 때 Y좌표를 얻을 수 있습니다.
  • $touchVelocity Touch된 상태에서 손가락을 움직이는 속도값을 얻을 수 있습니다.
  • $touchVelocityX Touch된 상태에서 손가락을 움직이는 속도의 X축 방향 값을 얻을 수 있습니다.
  • $touchVelocityY Touch된 상태에서 손가락을 움직이는 속도의 Y축 방향 값을 얻을 수 있습니다.
  • $touchPointerCount 화면에 터치된 손가락의 개수를 알 수 있습니다.
  • $keyboardHeight Mobile에서 키보드가 올라왔을 때 키보드의 높이값을 알 수 있습니다.
  • $deviceOS 현재 사용중인 Device의 OS를 알 수 있습니다.

Formula Syntax

Literal Values

Formula input에서 Layer이름을 참조하거나, 숫자, 문자열 등을 사용할 때 아래 표기법에 맞게 사용해야합니다.

Layer 이름

레이어 이름 양옆에 `(Backtick)을 사용해야 합니다.

Layer 이름

문자열

문자 양옆에 큰따옴표 혹은 작은따옴표를 사용해야 합니다.

문자열

문자열 줄바꿈

줄바꿈이 필요한 부분에 \n을 사용합니다.

문자열 줄바꿈

숫자

기호가 포함되지 않은 1234 형식의 숫자로 사용해야합니다.

숫자

Color

#FFFFFF 형식의 color값으로 사용해야 합니다.

Color

변수

기호가 포함되지 않은 variableName 형식으로 사용해야 합니다.

변수

사칙 연산

덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지 연산(%) 등 사칙연산을 할 수 있습니다.

나머지 연산(%)

숫자간의 나눗셈을 한 후 나머지 값을 구합니다. 예를 들어 5%2는 5를 2로 나눈 후 나머지 값인 1을 구합니다.

문자열 연산

다른 연산은 모두 숫자간의 연산만을 지원하지만, 덧셈은 문자열에 사용할 수 있습니다. 문자열로 덧셈 연산을 했을 때에는 문자열을 연결하는 용도로 사용됩니다. 예를 들어, 문자열 "1" 과 문자열 "2" 으로 덧셈연산을 하면, "12" 가 됩니다.

문자 + 문자

"helloworld"

"12"

문자 + 숫자

"hello1234"

Layer Property

레이어의 좌표, 크기 등의 프로퍼티 값을 참조할 수 있습니다.

  • `layerName`.x Layer의 X좌표 값을 구합니다.
  • `layerName`.y Layer의 Y좌표 값을 구합니다.
  • `layerName`.width Layer의 width 값을 구합니다.
  • `layerName`.height Layer의 height 값을 구합니다.
  • `layerName`.scaleX Layer의 scale foctor X 값을 구합니다.
  • `layerName`.scaleY Layer의 scale foctor Y 값을 구합니다.
  • `layerName`.rotate Layer의 rotate값을 구합니다.
  • `layerName`.opacity Layer의 opacity 값을 구합니다.
  • `layerName`.radius Layer의 radius 값을 구합니다.
  • `containerName`.scroll 현재 scroll 값을 구합니다.
  • `layerName`.color Layer의 color 값을 구합니다.
  • `layerName`.fillOpacity Layer의 fill opacity 값을 구합니다.
  • `layerName`.text Layer의 문자열을 구합니다.

Function

Text Manipulation

  • length(source: TEXT)NUMBER
    • 문자열의 길이를 반환합니다.
    • e.g. length("hello")5
  • left(source: TEXT, count: NUMBER)TEXT
    • 문자열과 숫자를 입력하면 왼쪽으로부터 입력한 숫자까지의 문자열을 반환합니다.
    • e.g. left(“hello”, 3)“hel”
  • right(source: TEXT, count: NUMBER)TEXT
    • 문자열과 숫자를 입력하면 오른쪽으로부터 입력한 숫자까지의 문자열을 반환합니다.
    • e.g. right(“hello”, 3)"llo”
  • concat(source1: TEXT, source2: TEXT)TEXT
    • 두개의 문자열을 입력하면 하나로 합쳐진 문자열을 반환합니다.
    • e.g. concat("hello", "world")"helloworld"
  • replace(source: TEXT,from: TEXT, to: TEXT)TEXT
    • 문자열의 일부분을 다른 문자열로 치환하여 반환합니다.
    • e.g. replace("helloworld","world", "protopie")"helloprotopie"
  • trim(source: TEXT)TEXT
    • 문자열 양옆의 공백을 제거합니다.
    • e.g. trim(" helloworld ")"helloworld"
  • ltrim(source: TEXT)TEXT
    • 문자열 좌측의 공백을 제거합니다.
    • e.g. ltrim(" helloworld ")"helloworld "
  • rtrim(source: TEXT)TEXT
    • 문자열 우측의 공백을 제거합니다.
    • e.g. rtrim(" helloworld ")" helloworld"
  • indexOf(source: TEXT, searchValue: TEXT)NUMBER
    • source 문자열에서 searchValue 의 위치를 반환합니다. 위치값은 0부터 시작하며, searchValue 가 찾아지지 않았을 때에는 -1을 반환합니다.
    • e.g. indexOf("hello world", "world")6
  • lowerCase(source: TEXT)TEXT
    • 문자열을 소문자로 변경합니다.
    • e.g. lowerCase("Hello")"hello"
  • upperCase(source: TEXT)TEXT
    • 문자열을 대문자로 변경합니다.
    • e.g. upperCase("Hello")"HELLO"

Math

  • min(source1: NUMBER, source2: NUMBER)NUMBER
    • 두개의 숫자중 작은 숫자를 반환합니다.
    • e.g. min(0, 1)0
  • max(source1: NUMBER, source2: NUMBER)NUMBER
    • 두개의 숫자중 큰 숫자를 반환합니다.
    • e.g. max(0, 1)1
  • abs(source: NUMBER)NUMBER
    • Value 의 절대값을 반환합니다.
    • e.g. abs(-1)1
  • round(source: NUMBER)NUMBER
    • 소수점을 반올림한 값을 반환합니다.
    • e.g. round(1.5)2
  • floor(source: NUMBER)NUMBER
    • 소수점을 내림한 값을 반환합니다.
    • e.g. floor(1.5)1
  • ceil(source: NUMBER)NUMBER
    • 소수점을 올림한 값을 반환합니다.
    • e.g. ceil(1.5)2
  • sqrt(source: NUMBER)NUMBER
    • 숫자의 제곱근을 반환합니다. 음수값을 넣을 경우 error가 발생합니다.
    • e.g. sqrt(9)3
  • pow(source1: NUMBER, source2: NUMBER)NUMBER
    • number1 을 number2 만큼 거듭제곱한 값을 반환합니다.
    • e.g. pow(2, 3)8
  • sin(radian: NUMBER)NUMBER
    • 숫자의 사인 값을 반환합니다.
    • e.g. sin(90)-0.89
  • cos(radian: NUMBER)NUMBER
    • 숫자의 코사인 값을 반환합니다.
    • e.g. cos(90)-0.45
  • tan(radian: NUMBER)NUMBER
    • 숫자의 탄젠트 값을 반환합니다.
    • e.g. tan(45)1.62
  • asin(value: NUMBER)NUMBER
    • Arcsin값을 radian으로 반환합니다.
    • e.g. asin(0)0
    • e.g. asin(1)1.5707963267948966(PI / 2, 90°)
  • acos(value: NUMBER)NUMBER
    • Arccosine값을 radian으로 반환합니다.
    • e.g. acos(0)1.5707963267948966(PI / 2, 90°)
    • e.g. acos(1)0
  • atan(value: NUMBER)NUMBER
    • Arctangent값을 radian 값으로 반환합니다.
    • e.g. atan(0)0
    • e.g. atan(1)0.7853981633974483(PI / 4, 45°)
  • random()NUMBER
    • 0~1 사이의 random한 숫자를 반환합니다.
    • e.g. random() ➔ 0-1 사이의 random한 숫자
  • random(min: NUMBER, max: NUMBER)NUMBER
    • 지정한 숫자 사이의 random한 값을 반환합니다.
    • e.g. random(1, 5) ➔ 1-5 사이의 random한 숫자
  • randomInt(min: NUMBER, max: NUMBER)NUMBER
    • 지정한 숫자 사이의 random한 정수 값을 반환합니다.
    • e.g. randomInt(1, 5) ➔ 1-5 사이의 random한 숫자(정수)

Color

  • color(red: NUMBER, green: NUMBER, blue: NUMBER)COLOR
    • RGB값을 넣으면 color값으로 변환됩니다.
    • e.g. color(255, 255, 255)#FFFFFF
  • red(source: COLOR)NUMBER
    • Color값을 넣으면 해당 color의 red값을 반환합니다.
    • e.g. red(#FF0000)255
  • green(source: COLOR)NUMBER
    • Color값을 넣으면 해당 color의 green값을 반환합니다.
    • e.g. green(#FF0000)0
  • blue(source: COLOR)NUMBER
    • Color값을 넣으면 해당 color의 blue값을 반환합니다.
    • e.g. green(#FF0000)0

Type Conversion

  • text(source: NUMBER)TEXT
    • 숫자를 문자열로 변환합니다.
    • e.g. text(1234)"1234"
  • number(source: TEXT)NUMBER
    • 문자열을 숫자값으로 변환합니다. 문자열이 올바른 숫자가 아닐 경우 오류를 반환합니다.
    • e.g. number("1234")1234
  • color(source: TEXT)COLOR
    • 문자열을 color 값으로 변환합니다. 문자열은 HEX RGB 로 표현된 문자열(예: #FF0000)이어야 하며, 그렇지 않을 경우 오류를 반환합니다.
    • e.g. color("#FFFFFF")#FFFFFF
  • format(value: NUMBER, format: TEXT)TEXT
    • 숫자를 원하는 형식의 문자열로 변환합니다. 숫자를 몇 글자씩 어떤 문자로 끊어 표현할지, 소수점 표현 문자와 소수점 하위 숫자 개수를 지정할 수 있습니다.
      number: 문자열로 변환하고자 하는 숫자
      formatText: 숫자 형식을 지정하는 문자열. 정수 부분은 # 으로, 소수 부분은 0으로 표시하며, 구분자로 사용할 문자를 중간에 추가할 수 있습니다.
    • e.g. format(1234.567, "#,###.00")1,234.58
    • e.g. format(1234567, "#,###.00")1,234,567
    • e.g. format(1234.567, "#.###,00")1.234,57
    • e.g. format(1234.567, "#,##.00")12,34.57
    • e.g. format(1234.567, "#,###")1,235
    • e.g. format(1234.567, "#")1235
Language selector
TOP