I'd like to welcome you to another Audio Programmer tutorial.

歡迎您再次閱讀音頻程序員教程。

And in this tutorial, we're going to talk about the Juice Audio Processor Editor class.

在本教程中，我們將討論 Juice 音頻處理器編輯器類。

This is the base class that is used by Juice for any visual elements that you would like to use for your user interface.

這是 Juice 的基類，可用於用戶界面的任何可視化元素。

That is, what people see when they open up your plugin.

也就是說，人們在打開您的插件時會看到什麼。

The main objectives for this tutorial are to introduce you to the Audio Processor Editor class and the concept of components within Juice.

本教程的主要目的是向您介紹音頻處理器編輯器類和 Juice 中組件的概念。

To introduce you to the concept of parent and child components.

向您介紹父組件和子組件的概念。

I'll also show you how to create new source files within the CMake system to create child components.

我還將向你展示如何在 CMake 系統中創建新的源文件，以創建子組件。

And finally, we'll dig a little bit deeper into what happens when you load a plugin and how the editor is actually created in the plugin loading process.

最後，我們將深入探討加載插件時會發生什麼，以及在插件加載過程中如何創建編輯器。

As always, I'll also briefly discuss some of the core C++ concepts along the way for those who are just getting started.

與往常一樣，我還會簡要討論一些 C++ 的核心概念，供剛剛入門的讀者參考。

If you're ready to take that deeper dive into audio plugin development, I invite you to check out our books.

如果您準備深入學習音頻插件開發，我邀請您閱讀我們的書籍。

The Complete Beginner's Guide to Audio Plugin Development and Creating Synthesizer Plugins with C++ and Juice.

音頻插件開發完全入門指南》和《使用 C++ 和 Juice 創建合成器插件》。

These are great resources to get started.

這些都是很好的入門資源。

All in all, there's about 900 pages on how to start creating your own plugins.

關於如何開始創建自己的插件，總共有大約 900 頁。

I invite you to check them out on theaudioprogrammer.com forward slash books.

我邀請你到 theaudioprogrammer.com forward slash books 上查看它們。

Link is in the description below.

鏈接在下面的說明中。

This video is also brought to you in part by our sponsor JetBrains.

本視頻的部分內容也是由我們的贊助商 JetBrains 提供的。

If you're looking for ways to streamline your development process, I invite you to check out their amazing C-Line IDE.

如果您正在尋找簡化開發流程的方法，我邀請您去看看他們令人驚歎的 C-Line 集成開發環境。

Their tools have helped me to exponentially speed up my workflow and I'm proud to be a supporter.

他們的工具幫助我成倍地加快了工作流程，作為他們的支持者，我深感自豪。

Be sure to check out more on the link in the description below.

請務必通過下面的鏈接查看更多資訊。

And with that being said, let's get started.

說了這麼多，讓我們開始吧。

OK, so right now we're in a blank Juice plugin template project.

好了，現在我們在一個空白的 Juice 插件模板項目中。

If you're not sure how to get to this point, be sure to check out our tutorial called CMake vs.

如果您不確定如何達到這一點，請務必查看我們的教程《CMake vs. CMake》。

ProJuice or FaceOff, which shows you how to start creating a project that will help you get up and running.

ProJuice 或 FaceOff，告訴你如何開始創建一個項目，幫助你啟動和運行。

And as I was saying before, we're going to use CMake for tutorials from here on out.

正如我之前所說，從現在開始，我們將使用 CMake 製作教程。

It's the industry standard.

這是行業標準。

And I think that even though it's more difficult to get started, it will definitely help you in the long run.

我認為，儘管起步比較困難，但從長遠來看，這肯定會對你有所幫助。

So where we are now is in the Audio Plugin Audio Processor Editor class.

是以，我們現在所處的位置是音頻插件音頻處理器編輯器類。

So as we can see, we have four files that are over here on the left hand side.

我們可以看到，左手邊有四個文件。

Plugin Editor.cppnh and Plugin Processor.cppnh.

Plugin Editor.cppnh 和 Plugin Processor.cppnh。

Plugin Processor is what we went through last tutorial where we talked about the Audio Processor class.

Plugin Processor（插件處理器）是我們在上一教程中討論過的音頻處理器類。

And that is where the actual audio processing happens for your plugins.

這也是對插件進行實際音頻處理的地方。

So not the part that you see, but the actual audio processing.

所以，不是你看到的那部分，而是實際的音頻處理。

The Audio Processor Editor class is what you actually see when you load your plugin.

音頻處理器編輯器類是您在加載插件時實際看到的內容。

So if I just go ahead and I compile this here, we can see that this plugin is loaded.

是以，如果我繼續編譯這個插件，就能看到插件已加載。

We're in standalone mode right now.

我們現在處於獨立模式。

And that what we actually see, this is the Audio Processor Editor.

這就是我們實際看到的音頻處理器編輯器。

Now, if we dive a little bit deeper into this class, we can see that it inherits from this class called the Audio Processor Editor class.

現在，如果我們深入研究一下這個類，就會發現它繼承自這個名為音頻處理器編輯器類的類。

So what I'm going to do is I'm going to jump into this class now.

所以，我現在要做的就是跳進這個班級。

And what we'll see is that the Audio Processor Editor class is a juice class.

我們將看到，音頻處理器編輯器類是一個果汁類。

And this in turn inherits from the component class.

而這又繼承自組件類。

So the component class is essentially any visual element that you have within juice.

是以，組件類基本上就是果汁中的任何可視化元素。

So when you load up some type of visual class in juice or you're creating some type of visual element, it will inherit from this component class.

是以，當你在 juice 中加載某種類型的可視化類或創建某種類型的可視化元素時，它將從這個組件類繼承。

And what I'll do here is I'll actually show you the juice documentation because sometimes it's nice to see it this way as well, which is that we have this Audio Processor Editor class.

在這裡，我會向你展示果汁文檔，因為有時這樣看也不錯，我們有這個音頻處理器編輯器類。

And then this is what's called an inheritance diagram, which shows you where in the hierarchy these classes inherit from.

這就是所謂的繼承圖，它顯示了這些類在層次結構中的繼承位置。

So it says here that the juice Audio Processor Editor class inherits from the juice component class.

是以，這裡說 juice 音頻處理器編輯器類繼承自 juice 組件類。

So anything that you can do with a component class, you can do with an Audio Processor Editor class because Audio Processor Editor inherits from component.

是以，只要是組件類能做到的，音頻處理器編輯器類也能做到，因為音頻處理器編輯器繼承自組件。

OK, so now let's just jump back into the source code here.

好了，現在讓我們回到源代碼中。

Here we have four functions that are in this class.

在這裡，我們有四個屬於這一類的函數。

And this is pretty typical for what you would see within any type of component or visual element class.

這對於任何類型的組件或可視化元素類來說都是非常典型的。

You would have a constructor and a destructor that are called when the window is created or destroyed.

窗口創建或銷燬時會調用一個構造函數和一個析構函數。

And you have this paint function, which is more for things that you would do within that component itself.

此外，你還可以使用 "繪製 "功能，它更多地用於在組件本身中進行操作。

So if you wanted to write some text, for example, we have the window currently saying hello world.

是以，如果你想寫一些文字，例如，我們的窗口目前正在寫 "hello world"。

If we wanted to change the color of the background, if we wanted to change the size of the text, we would do that within paint.

如果我們想改變背景的顏色，如果我們想改變文字的大小，我們都可以在油漆中完成。

And then we have this resized function, which is where we would actually lay out any type of other components that we want to sit inside of this Audio Processor Editor.

然後，我們有一個調整大小的功能，在這裡，我們可以實際佈局我們想要放在音頻處理器編輯器中的任何其他組件。

So I'm going to describe that in a little bit more detail here by going to the CPP file, which is the actual implementation of these function calls.

是以，我將通過 CPP 文件對其進行更詳細的描述，CPP 文件是這些函數調用的實際實現。

So as I said before, first thing that we have is the constructor.

是以，正如我之前所說，我們的第一件事就是構造函數。

And I won't go really into what these are because I don't think that they're relevant so much for getting started.

至於這些是什麼，我就不多說了，因為我覺得它們與入門沒有太大關係。

But what we see down here is we have this set size, which at the moment is 400 by 300 pixels.

但我們在這裡看到的是我們設定的尺寸，目前是 400 x 300 像素。

Right.

對

So if we just go ahead and build that now, we see that this is 400 by 300 pixels.

是以，如果我們現在繼續創建，我們會看到這是 400 x 300 像素。

And if I wanted to change this, let's say I wanted to change it to a 600 pixel height and then we just rebuild this here, then we will see that now the plugin has got taller.

如果我想改變這個，比方說我想把它改成 600 像素的高度，然後我們在這裡重建這個，那麼我們就會看到現在插件變高了。

Right.

對

So as I was saying before, for people who are just getting started, the constructor is what's being called when the window is first created.

是以，正如我之前所說，對於剛剛入門的人來說，構造函數就是窗口首次創建時調用的函數。

And then the destructor is what happens when the when the window is destroyed.

然後，當窗口被銷燬時，析構函數就會發生作用。

Now, one thing that I will say that was a common mistake that I used to think about when I was first getting started and one that I see very often for other people who are getting started is that when when we're in a DAW, let's say we're in Ableton Live or in Reaper, that it's very easy to think that if we close out the plugin, that the plugin window is actually being minimized.

現在，我要說的是，我在剛開始使用插件時經常會犯的一個錯誤，我也經常看到其他剛開始使用插件的人犯這個錯誤，那就是當我們在 DAW 中，比如說在 Ableton Live 或 Reaper 中，很容易認為如果我們關閉插件，插件窗口就會被最小化。

That's how I used to think of it in my mind, because when you pull up the window again, all of the parameters and dials and sliders are all in the same place where you left them.

我以前就是這麼想的，因為當你再次打開窗口時，所有的參數、刻度盤和滑塊都在你離開的地方。

Or at least they're supposed to be if the person made the plugin properly.

或者說，如果製作者正確地製作了插件，至少應該是這樣的。

So because of that, I used to think that this window was actually being minimized.

是以，我一直以為這個窗口實際上被最小化了。

But one thing one key thing to think about is that the window is actually being destroyed.

但是，有一件事是必須考慮的，那就是窗戶實際上正在被破壞。

So it actually does not exist anymore.

是以，它實際上已經不存在了。

You'll learn a little bit more about this as we get a little bit further in the plugin development.

隨著插件開發的深入，您會了解到更多這方面的資訊。

But one great example of where this mistake is made is when it comes to sliders that are holding some type of value.

但有一個很好的例子可以說明這種錯誤，那就是當涉及到具有某種價值的滑塊時。

So when it's holding that value, it's very important that the value of the slider that is sitting within this plugin window is able to relay what the value of the slider is over to the plugin processor.

是以，當它保持該值時，插件窗口中的滑塊值必須能夠將滑塊的值傳遞給插件處理器，這一點非常重要。

Because if it doesn't, and you're relying on that value to be there, and the plugin window is destroyed, then it doesn't exist anymore.

因為如果它不存在，而你又依賴於該值的存在，那麼插件窗口被破壞後，它就不存在了。

And you're going to be trying to look for a value that does not exist.

你將試圖尋找一個不存在的值。

So once again, that gets a little bit, that's jumping ahead a little bit.

所以，這又有點，有點跳躍了。

But it's just something to keep in mind that as you're going through this journey, that when you're creating this window, that when you close it out, it's not minimized.

但需要注意的是，在你經歷這段旅程時，當你創建這個窗口時，當你關閉它時，它不會被最小化。

It actually does not exist anymore.

實際上，它已經不存在了。

Okay.

好的

So jumping down a little bit further, we have this function that's called paint.

再往下跳一點，我們有一個名為 "塗抹 "的函數。

So paint, I would think of as what you actually want to happen within this visual component itself.

是以，我認為繪畫就是你希望在這個視覺組件中發生的事情。

So as we can see, we have this g.fillall, which is filling the background of the component with this green color.

是以，正如我們所看到的，我們使用 g.fillall，將組件的背景填充為綠色。

Now, what I could do is I could actually change this color.

現在，我可以做的就是改變這種顏色。

Let's just go ahead and change it to black.

我們還是把它改成黑色吧。

And what I can do is, oh, I need to get rid of this bracket.

我能做的就是，哦，我得把這個支架去掉。

And what I could do is I could recompile this.

我可以做的就是重新編譯。

And then what we should see is now the plugin window is black, right?

然後我們應該看到插件窗口是黑色的，對嗎？

And if I wanted to change this text to red, and I wanted to make it a little bit bigger, I would just do that here.

如果我想把文字改成紅色，並把它放大一點，就可以在這裡完成。

So the size of this text is being set by this g.setfont.

是以，文字的大小是由 g.setfont 設置的。

So if I wanted to change this from 15 to 30, and then if I wanted to change the color from white to red, this is where all of that would happen.

是以，如果我想把這個數字從 15 改為 30，然後把顏色從白色改為紅色，所有這些都會在這裡實現。

So paint, once again, is the place where the things that are actually happening within this component itself are being changed.

是以，油漆又一次成為了這一部件內部實際發生變化的地方。

Now coming down to the resize function, we see that there's nothing that's happening inside of this at the moment.

現在來看看調整大小功能，我們可以看到，目前這個功能內部什麼也沒發生。

And this brings us to another principle of these component classes, which is that components can hold other components.

這就引出了這些組件類的另一個原則，即組件可以容納其他組件。

So when I say component, think a window, like a visual window.

所以，當我說 "組件 "時，你要想到一個窗口，就像一個可視窗口。

And these components can have other components inside of them.

這些組件內部還可以有其他組件。

And the way that you would lay those out is typically in this resized function.

通常情況下，你可以通過這個調整大小的功能來佈局這些內容。

Okay, so what we're going to do now is we're going to create our own component class.

好了，現在我們要做的就是創建自己的組件類。

And we're going to include it as a child within this plugin editor class that we have here.

我們將把它作為一個子類包含在這個插件編輯器類中。

Okay, so if that sounds like a daunting task, don't worry, I'm going to take you step by step.

好吧，如果這聽起來像是一項艱鉅的任務，別擔心，我會一步一步地教你。

And I feel confident that if you follow along, that you're going to come out successfully on the other side.

我相信，只要你跟著我走，就一定能成功到達彼岸。

So let's go ahead and get started.

那麼，讓我們開始吧。

First thing that we're going to need to do if we want to create a component class is we're going to need to create some source files.

要創建一個組件類，我們首先需要創建一些源文件。

So the way that we're going to do that is we're going to go over here to our source folder over here in our Explorer.

是以，我們要做的就是在資源管理器中進入源文件夾。

We're going to right click and create a new C++ class.

我們點擊右鍵，創建一個新的 C++ 類。

So this is how you would do it in SceneLion.

是以，您可以在 SceneLion 中這樣做。

If you were working in Xcode or Visual Studio, it essentially be a similar type of command.

如果您在 Xcode 或 Visual Studio 中工作，基本上也是類似的命令類型。

So now I'm going to go ahead and create this.

現在我要繼續創建這個。

And I will just call this, let's just call it square.

我把它叫做 "正方形"。

And I will create a .cpp and .header file for this new class that we're calling square.

我將為這個我們稱之為 square 的新類創建 .cpp 和 .header 文件。

And I'm going to hit OK.

然後我就按 "確定 "鍵。

And now we've created those new source files.

現在我們已經創建了這些新的源文件。

I'm just going to hit add.

我就點擊添加。

And now we have some new source files.

現在我們有了一些新的源文件。

And what I'm going to do is I'm just going to get rid of everything just so it's blank.

而我要做的，就是把所有東西都去掉，讓它一片空白。

And we'll start from complete scratch.

我們將從頭開始。

The next thing that we need to do is we need to now include this within our CMake file.

接下來我們要做的就是在 CMake 文件中加入這個文件。

So the reason that we need to do this is if we look at our current CMake file, we can see here that the source files that we've included so far are plug-in editor.cppnh and plug-in processor.cppnh.

是以，我們需要這樣做的原因是，如果我們查看一下當前的 CMake 文件，就會發現到目前為止我們包含的源文件是 plug-in editor.cppnh 和 plug-in processor.cppnh。

And so it doesn't know at the moment that square.cppnh are supposed to be part of our build system, part of the files that we want to use and include in our project.

是以，它目前還不知道 square.cppnh 應該是我們構建系統的一部分，是我們想要使用幷包含在項目中的文件的一部分。

So just to show you here, if I go into the source folder and just open it up in the finder, here we are in our project.

如果我進入源代碼文件夾並在查找器中打開它，就會看到我們的項目。

You see cmakelist.txt here.

請參見 cmakelist.txt。

And there's the source folder.

這就是源文件夾。

I'm just going to double-click in there.

我只需在這裡點擊兩下。

And there we see our class, all of our source files, in fact, square.cppnh and all of our other ones.

在這裡，我們可以看到我們的類和所有源文件，事實上，還有 square.cppnh 和其他所有文件。

Now, what we need to do is we need to include this in our CMake file.

現在，我們需要做的是將其包含在 CMake 文件中。

Now, the reason that you need to say source slash dot plug-in editor and slash square dot h and cpp is because the declaration that you're making inside the CMake file needs to be relative to where the cmakelist.txt resides.

現在，之所以需要用斜線點插件編輯器源代碼和斜線方形點 h 和 cpp，是因為在 CMake 文件中進行的聲明需要相對於 cmakelist.txt 所在的位置。

So here we are in our project.

我們的項目就這樣開始了。

We see that we have this cmakelist.txt, and then we have this source folder.

我們可以看到 cmakelist.txt，然後是源文件夾。

So we need to say relative to the cmakelist.txt file, we're going into source and into these files.

是以，我們需要說，相對於 cmakelist.txt 文件，我們要進入源代碼，進入這些文件。

If we had another folder that we just, let's say we called it code, for instance, and we put these files in here, then in our cmakelist.txt, it would need to say source slash code slash whatever your source file is.

如果我們有另一個文件夾，比方說，我們把它叫做代碼，並把這些文件放在這裡，那麼在 cmakelist.txt 中，就需要寫上 source slash code slash（源文件斜線代碼斜線），不管你的源文件是什麼。

So that's the reason why the convention is being named this way.

所以，這就是為什麼大會要這樣命名的原因。

Okay, so now we're going to put our square class files in here.

好了，現在我們要把方形類文件放在這裡。

So we've got square.cpp, source, square.h.

所以我們有 square.cpp、source、square.h。

And now those are included.

現在這些都包括在內了。

Now, if you're in Visual Studio or in Xcode, what you're going to need to do to update your CMake build is you're going to need to invoke CMake, which is that normal command that you normally do, which is cmake-bbuilds-gxcode or whatever your command is, right?