MPE Setup Tutorial for Cinder

How to create a basic Most-Pixels-Ever application using Cinder.

If you're not familiar with how MPE works, read this first:
https://github.com/shiffman/Most-Pixels-Ever-Processing/wiki/How-This-Works

###1) Download the Cinder Block $ cd path/to/cinder/blocks $ git clone https://github.com/wdlindmeier/Most-Pixels-Ever-Cinder.git

###2) Checkout the right branch, if necessary If you're running the glNext Cinder branch, switch to the glNext MPE branch:

$ git checkout -b glNext origin/glNext

###3) Create an MPE App

Generate a project with Tinderbox using the "Most Pixels Ever" template. Click the "Next" button.

Choose your install method. "Copy" is recommended. Finally, click the "Finish" button.

This will create a project with the minimum required MPE setup. Running the code won't be very interesting because the app doesn't draw anything.

###4) Create Multiple Targets For this tutorial we'll create 2 targets that act as 2 different screens. If you're running across multiple machines, each target would live on it's own machine. Every target has an ID and a settings file that describes what part of the scene it renders.

First, add a CLIENT_ID preprocessor macro to your build settings:

Next, duplicate the target:

Optionally update the product name.
Optionally update "Info.plist File" to use Info.plist (like the first target), and delete the copy.

Rename your schemes after the respective Targets:

Change the value of the CLIENT_ID preprocessor macro to 1 in your new target.

In the finder, duplicate settings.xml found in your assets folder. Rename them for each client:

Add the settings .xml files to the project's Resources group. Uncheck "Copy items into destination..." and select both targets shown in "Add to targets.":

Optionally remove settings.0.xml file from the "copy bundle resources" Build Phase of client 1 (and visa versa). Each client only needs a copy it's own settings file. The others will be ignored.

Update settings.1.xml with settings for client 1:

<settings>
	<client_id>1</client_id>
	<name>Synchronous Client 1</name>
	<server>
		<ip>127.0.0.1</ip>
		<port>9002</port>
	</server>
	<local_dimensions>
		<width>300</width>
		<height>400</height>
	</local_dimensions>
	<local_location>
		<x>300</x>
		<y>0</y>
	</local_location>
	<master_dimensions>
		<width>600</width>
		<height>400</height>
	</master_dimensions>
	<go_fullscreen>false</go_fullscreen>
	<offset_window>true</offset_window>
	<debug>1</debug>
</settings>

Override mpeSettingsFile() to return the correct settings file for each target:

ci::DataSourceRef MY_MPE_APP::mpeSettingsFile()
{
    return loadResource("settings."+std::to_string(CLIENT_ID)+".xml");
}

###5) Run the Server First download the Python server:

$ git submodule update --recursive --init

Then run the server:

$ ./mpe-python-server/mpe_server.py

###6) Launch the Apps Launch both apps simultaneously from XCode by choosing each scheme in the drop down and selecting Product > Run (⌘R).
You could also build the targets and run them from the finder like a standard app.

###6) Extras MPE has some additional features not covered here:

• Send data between apps.
• Create an "async controller" client that doesn't render part of the scene.
• Account for a physical screen margin.
• Render in 2D or 3D.
• iOS support.

To see these features in action, take a look at the samples apps: MPEBouncingBall and MPEBouncingBalliOS.