1.2 Patches 模塊 - Basics 基礎(chǔ)


Patches are the building blocks of Origami Studio. Play with your ideas and iterate with incredible speed.

模塊構(gòu)建了 Origami Studio祠丝。用Origami Studio 可以以驚人的速度實(shí)現(xiàn)你的創(chuàng)意及后續(xù)迭代竿报。

Patches allow you to add interaction, animation, and behavior to your prototype. Each patch performs a unique function and can pass and receive information to and from other patches.

模塊允許添加交互、動(dòng)畫和事件到原型愕够。每個(gè) Patch 都代表一個(gè)功能。通過在連接,在Patch間接受和傳遞信息實(shí)現(xiàn)交互枚赡。


The patch library contains a large number of patches, but a core set of 15-20 patches will support most prototypes. They all have single key Keyboard Shortcuts to enable super fast iteration.

模塊庫中有大量的模塊,但是常用的模塊只有15~20個(gè)谓谦。他們都有對(duì)應(yīng)快捷鍵能快速插入标锄。

Patches range from simple math patches:

簡(jiǎn)單的數(shù)學(xué)模塊:

+ Patch 用左側(cè)的兩個(gè)數(shù)值相加,得出右側(cè)的數(shù)值茁计。2+3=5

... to patches that add interactions to layers:

給圖層添加 交互

Interactions 交互 Patch 輸出觸摸信息到 ** Viewer 查看器 **的一個(gè) **Layer 圖層 **料皇。但手指按下矩形,從右側(cè)的 ? Down 接口輸出信息星压。

... to patches that manage states:

添加管理模塊狀態(tài)

Switch 開關(guān) Patch 可以大開或關(guān)閉左側(cè)的輸入接口践剂,并在右側(cè)輸出口輸出當(dāng)前 States 狀態(tài)

... to patches that control layer properties:

控制 Layer 圖層 屬性的模塊:

通過點(diǎn)擊Layer屬性窗口中的任意屬性添加圖層屬性模塊娜膘。圖中的這個(gè)模塊控制圖層的顯示和隱藏逊脯。

(板栗:還有要補(bǔ)充的????)


▲ 板栗繪制的示意圖

  • 選中圖層,點(diǎn)擊什么屬性就添加對(duì)應(yīng)屬性的模塊竣贪,官方說明中控制的屬性是Enable點(diǎn)擊屬性窗口中的Enable添加军洼;
  • 模塊上的名稱是圖層名稱,不是模塊的名稱演怎;
  • 添加一個(gè)屬性模塊匕争,圖層下也會(huì)顯示一個(gè)對(duì)應(yīng)的屬性。

Ports 接口

Ports allow patches to receive information in and pass information back out. The ports on the left side of a patch are inputs, and the ones on the right are outputs. Edit Inputs by clicking the port's value (unless a cable from another patch is connected to the Input already).

借口允許模塊接收信息并傳遞信息給其他模塊爷耀。左側(cè)的接口是輸入口甘桑,右側(cè)的是輸出口。通過點(diǎn)擊輸入口的值編輯輸入信息歹叮,除非已經(jīng)接收了其他模塊的值(這個(gè)端口已經(jīng)被連上線了)跑杭。

Each port has a different type of information it can receive — the important types of values used in Origami are:

每個(gè)接口都有固定類型的信息可以被接收,以下為不同的信息類型和使用的值:

  • Number: An integer or decimal.
  • Boolean: A boolean value, which can have two possible values (ex: true/false, yes/no, on/off, 0/1). Boolean ports are often labeled On/Off, and the On value is represented with a checkmark. Similar to programming, a boolean can be converted to a number 0 (off) or 1 (on) when passing values between patches.
  • Text: Any text string.
  • Image: Any image that you drag or paste.
  • Video: Any video that you drag or paste.
  • Sound: Any sound that you drag or paste.
  • Color: Any RGB or HSL color.
  • Index: Any non-negative, integer (ex: 0, 1, 2)
  • JSON Data: Any number of values of any type in JSON format. JSON (JavaScript Object Notation) is a common format for storing and exchanging data.
  • Point: A value that represents numbers in 2D, 3D, or 4D. Points can represent any set of X, Y, Z values (ex: Position X, Y, Z; Rotation X, Y, Z).
    Some patches can change the number of ports it has or the type of value it supports. Right-click any patch to see the options available.
  • Number 數(shù)字: 整數(shù)或小數(shù)咆耿。
  • Boolean 布爾值: 布爾值有兩個(gè)可能值 例: True / False 真/假, Yes / No 是/否, On / Off 開/關(guān), 0 / 1 德谅。布爾值接口通常被標(biāo)記為 On / Off,On 的值代表一個(gè)復(fù)選標(biāo)記萨螺,和編程一樣窄做,當(dāng)數(shù)值在模塊間傳遞時(shí)布爾值可以轉(zhuǎn)換為0(Off)或者1(On)宅荤。
  • Text 文本: 任何文本字符。
  • Image 圖片: 拖入或粘貼任意圖片浸策。
  • Video 視頻: 拖入或粘貼任意視頻冯键。
  • Sound 聲音: 拖入或粘貼任意音頻文件。
  • Color 顏色: 任意RGB或HSL顏色庸汗。
  • Index 索引: 0和正整數(shù)(例:0惫确、1、2)蚯舱。
  • JSON Data JSON 數(shù)據(jù): 任意數(shù)值任意類型的 JSON 格式. JSON (JavaScript Object Notation) 是一種常用的數(shù)據(jù)儲(chǔ)存和交換格式改化。(板栗:后面有一篇講 [Custom Devices 自定義設(shè)備] 的,用的文件格式就是JSON??)
  • Point 點(diǎn): 即pt枉昏,在2D陈肛、3D、4D中的值兄裂。 點(diǎn)可以用于任何單位的X, Y, Z軸值 例:坐標(biāo)位置的 X句旱,Y,Z 值; 旋轉(zhuǎn)角度的 X晰奖,Y谈撒,Z 值。有些 Patch 可以改變擁有的接口數(shù)或支持的值類型匾南,在 Patch 上點(diǎn)擊鼠標(biāo)右鍵查看支持選項(xiàng)啃匿。
    (板栗:老實(shí)說最后一句沒明白指的啥)

Cables 連線

Cables pass information (values) from patch to patch via their ports. Think of values like water, and cables as the pipes that move it from place to place. The values flow in one direction: left-to-right from an output to an input.

信息(值)通過連線在模塊和模塊的接口流轉(zhuǎn)。想象值像水蛆楞,連接的線像水管溯乒,把水從一個(gè)地方引流到另一個(gè)地方。值的流轉(zhuǎn)方向:從左向右豹爹,從一個(gè)模塊的右側(cè)輸出口到另一個(gè)模塊的左側(cè)的輸入口裆悄。

To create a cable, drag from an output port (on the right of a patch) to an input port (on the left of a patch). To disconnect a cable, drag the right end out of the Input port.

從模塊右側(cè)的輸出口拖動(dòng)鼠標(biāo)到另一個(gè)模塊的輸入口創(chuàng)建連線,從被連接的 模塊左側(cè)的輸入口把連線拖到空白處斷開連線帅戒。

An output port may connect to multiple cables, but an input port can only accept one cable at a time. Use patches like math (+, -, x, /), logic (Or, And, Not), Transition, or Option Picker to combine or select from multiple cables. Quickly connect an output to multiple inputs by selecting the output, and shift-clicking the inputs you want to connect.

輸出口可以創(chuàng)建多個(gè)連線灯帮,但輸入口在同一時(shí)間只能接收一個(gè)連線。像計(jì)算類(如+逻住、-x迎献、/ )瞎访,邏輯類(如OrAnd吁恍、Not)扒秸,過渡(如Transition)或選項(xiàng)選擇器(如Option Picker)播演。

點(diǎn)擊輸出口,按住 Shift 再點(diǎn)擊要連接的輸入口能快速創(chuàng)建連線伴奥。


Connecting them together 連接

In the example below, three different patches pass values to each other with cables that are connected to their ports. Together, the patches describe a touch down interaction that switches a layer on and off.

在下面的示例圖中写烤,三個(gè)不同的 Patch 通過連線連接接口將值傳遞給對(duì)方。
圖中是一個(gè) **通過按下 (Down) 的交互 (Interaction) 動(dòng)作拾徙,打開/關(guān)閉 (Switch) 圖層 (Layer) 的使用 **的模塊之間的連接方式洲炊。


Summary 總結(jié)

  • Patches let you quickly add interaction, animation, and behavior to your prototype.
  • A patch can have inputs and outputs that let it communicate with other patches.
  • There is a large library to support building any idea. For most prototypes, you only need to know about 15-20.
  • Learn Keyboard Shortcuts to speed up your workflow.
  • 模塊讓你快速添加交互、動(dòng)畫和事件到原型尼啡。
  • 模塊有輸入口和輸出口暂衡,通過輸入和輸出相互傳遞信息。
  • 有一個(gè)豐富的模塊庫可以實(shí)現(xiàn)你的想法崖瞭,但對(duì)于大多數(shù)原型之需要了解15~20個(gè)Patch狂巢。
  • 學(xué)習(xí)Keyboard Shortcuts 快捷鍵 可以提升效率。

?? Introduction 簡(jiǎn)介 ? Layers 圖層 ??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末书聚,一起剝皮案震驚了整個(gè)濱河市唧领,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌雌续,老刑警劉巖疹吃,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異西雀,居然都是意外死亡萨驶,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門艇肴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腔呜,“玉大人,你說我怎么就攤上這事再悼『顺耄” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵冲九,是天一觀的道長(zhǎng)谤草。 經(jīng)常有香客問我,道長(zhǎng)莺奸,這世上最難降的妖魔是什么丑孩? 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮灭贷,結(jié)果婚禮上温学,老公的妹妹穿的比我還像新娘。我一直安慰自己甚疟,他們只是感情好仗岖,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開白布逃延。 她就那樣靜靜地躺著,像睡著了一般轧拄。 火紅的嫁衣襯著肌膚如雪揽祥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天檩电,我揣著相機(jī)與錄音拄丰,去河邊找鬼。 笑死是嗜,一個(gè)胖子當(dāng)著我的面吹牛愈案,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鹅搪,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼站绪,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了丽柿?” 一聲冷哼從身側(cè)響起恢准,我...
    開封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎甫题,沒想到半個(gè)月后馁筐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡坠非,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年敏沉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片炎码。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡盟迟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出潦闲,到底是詐尸還是另有隱情攒菠,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布歉闰,位于F島的核電站辖众,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏和敬。R本人自食惡果不足惜凹炸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望概龄。 院中可真熱鬧还惠,春花似錦、人聲如沸私杜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衰粹。三九已至锣光,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铝耻,已是汗流浹背誊爹。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瓢捉,地道東北人频丘。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像泡态,于是被迫代替她去往敵國和親搂漠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 其實(shí)我也一直是渴望自己能寫一些東西的 但是無奈這種不急不躁的性格和懶惰的壞習(xí)慣 已經(jīng)錯(cuò)過了太多太多次 突然發(fā)現(xiàn)了簡(jiǎn)...
    帥三爺閱讀 120評(píng)論 0 0
  • 描述:列表解析式是將一個(gè)列表(實(shí)際上適用于任何 可迭代對(duì)象(iterable) )轉(zhuǎn)換成另一個(gè)列表的工具某弦。在轉(zhuǎn)換過...
    隨風(fēng)化作雨閱讀 318評(píng)論 0 0
  • 早上好桐汤! 新的一天請(qǐng)微笑!
    翡Smile閱讀 177評(píng)論 0 0