Reality Composer ARKit Tutorial - How To Prototype AR Apps in One Hour

this is an interactive augmented reality prototype that I created in reality composer in less than one hour with zero lines of code the mission we highlighted that first I'm going to create a new default project in reality composer and as you can see starts with a Q and a little button and here is the the scene the type of anchor that your scene would be working with and by default this horizontal anchor it means horizontal service but I'm going to switch it to image because we have the image of the book here that we'd like to anchor the image to can remove that QB here and when I do that because it might use that as the buttons we have because I can customize the text and so on and the background color so this one is like tilted leaves 60 degrees about 16 something yeah so I'm gonna have it fully well it's not also gonna make it 90 degrees actually negative 90 so then you facing it up and I'm gonna move it to the side in one nice thing that the author composer gives you the about this snap the objects to each other so I'm using the shift button with a click to rotate my scene and by default I won't have right here but before I do that might as well just opened my file and add the image from it's actually easier for me to go to my finder and just drag the image here until you see the placeholder and then this is placed as an object so I'm gonna place it and then delete it that way I have it here in list of assets and now I can just select it way easier than just importing it now what I need to do next is specified width and height unfortunately because I have the book I can measure it and it's about 13 and 1/2 centimeters width so not 37 but 13 that's the biggest constraint is like you have to specify the width and height of the image in real life in physical life in order to have it done in physical reality have time to have it mapped into augmented reality so 13 1/2 centimeters so this is about the size of the image life and now I can actually now start to position my items relative to it so that I know this is now much larger button than I thought it would have been with the previous image so right now it's you can see it it's that 17% one about like probably half the size let's say 8 percent Tsingtao it looks much better this is the button this is like what it would show if like to buy the Kindle version so I'm going to say let's say text with the Kindle obviously Kindle 999 and then what I'm gonna do is I'm gonna make sure that I like button is positioned at the right height right now at the right Y position so the directions are this is X this is the green is Y and the blue is Z so Y position you can see it's like almost there it's a 0.05 centimeters almost zero centimeters which is good and then I'm gonna duplicate that he's in command D and I'm gonna lower it slightly as you can see the snapping is working as a moving this and I'm gonna position it to be aligned with the left edge of the top button I'm gonna say on this one 1999 and reposition it here and the last one I'm gonna say have either paperback and this will say paperback $14.99 so these are the three options that I have right now and I can double-check they're all positioned to the right Y position so that they show a dry time every time yeah obviously might so I'm gonna go back I like working if I'm doing UI attach to an image I like working almost looking down at the image so that everything is laid out and then I'm going to switch to perspective to be perspective lean on them to see how the position in terms of height but most of the time I don't want to cover the image with stuff I just want things to come out next to it so this is what the base UI is like as you can see we're still working in the main scene here let this default so you haven't change anything yet and I'm gonna have a fourth button say maybe slightly bigger one here it says add to cart' and I'm gonna have to be the Amazon button and perhaps on this one I need the button to be a little slightly bigger so I'm gonna scale it to be 10% all right so I have those things and button here yeah I'm gonna have them all attached here so this is the list of choices the button and then I want to display the star rating somewhere so to do that say the story ting will show at the top of the book I'm gonna have star and just drag it and drop it right here but here it's pretty big so I'm gonna resize and then select it and resize it too by 10:00 yep that's looks right so this is the star rating for the book position it want to have it the same Y position as the other one so 0.05 centimeters so that's the same position as the buttons of this place and I'm going to place five stars next each other almost there you really nice from Apple if you can select I'm sure that's coming some point but if you can select multiple objects and be able to distribute them among x axis y axis z axis and so on so how far star Z I'm going to select for them and give the book five star rating four star rating so right and a little big so in order to size I'm gonna do command G size them all together like maybe 75% okay push them a little bit to the side and then I command shift G to ungroup them so this is airport cominjee connectivity if you're if you want manipulate multiple items at once it's the last thing i want to add to this UI is to add a picture of my favorite people on the planet dawn woman and align it with this so in the future if you want to like click on the image and fall or see books by that author that would work so I'm gonna go here and I'm gonna place butcher the same way I did before I just drag and drop right here though he is a great guy looks really big here so but I scale it 10 percent I'm gonna place it it's about 5 centimeters and pinch spread zoom and see looks looks good so this this looks ok as my starting seeing then I line this the lines everything the left to the left edge line this with the fun edge roughly so you can't have alignment working here but then the teacher trick because initially we want to have these buttons slide out to from and have two little bit down shift select these guys I'm gonna have them slide out from below the book cover and if I want to do that you know the book cover in in physical reality does not cover these buttons it's gonna if they slide out like this then I can come out from above the book and to do that actually the easiest trick to do is to play some other image on top of this and like another version of this image here and scale it properly it's getting everything's ten percent would see that that's too big too small twenty-five fine-tune this that's perfect so now this image will be displayed on top of the actual book image in reality and I can make it so that it's slightly higher than the other ones like point one centimeters and now you can see if I slide this it goes below the image and that's what's gonna happen in real look like in on top of the book when I yeah when I project this augmented reality experience onto it if I plus playing nothing happens because there are no interactions and animations I'm assuming this is just how it looks in physical reality but I need to do that I need to actually go to file and press export or press command II move that save it to the folder a shared folder iCloud with Dropbox and preview it on the iPad so let's go see how it looks on the iPad you I choose the UI before actually detecting the image shows like the floating roasted UI which I don't like so I'm gonna do here is we've got the scenes add another scene actually I'm gonna duplicate the scene right here and make this startup scene and this is main scene and before the storm actually gonna delete everything this was gonna be blank seemed that I'm going to and it behavior too and this is simple behavior that says when this scene starts so I'm gonna add custom behavior and specify when the scene starts I'm gonna transition to the next scene and we'll choose main see what this will do is that it will wait to show the actual UI until the scene is until the image is detected and then it's gonna transition do that into that scene showing the UI so that way it does not really display that goes to do i anytime just gonna show something blank and this is the main scene i'm gonna work from right now so this is all done and all i need to do now is as the user if these are tabs on add to cart first of all let me just make the kindle version selected by default so i'm going to go to properties a year and let's say i'm gonna reverse the colors on these two on this button so it shows like it's selected so text color or actually like let's say that blue one is selected so this one will be a white so thanks color would be really great from a cloth allows us to specific to do a hex color here too so that will please and this is the blue yeah looks spent now and this is white and i'm gonna do the same for this one you know the feature request from apple please allow us to copy properties back like face properties like in keynote command shift c command shift V so text color I believe was that one and then background color this one so now I know it's the Kindle selected if I add to cart' I want to go to the cart the scene that's showing cart so what I'm gonna do now is I'm gonna duplicate that one yeah that scene yet another time the agent command engineer can right-click and cut copy and paste or duplicate and this one I'm gonna call cult so far I haven't created any animation while you leave the animations always to the end what I do first is layout first step second step is transitions like the different states of the app and then third step is creating the linking between those stages and then fourth step is the the animations so this one what I want to do is I'm gonna do I want to do with cart so I don't need any of these guys I'm directing them I don't need the ratings unfortunately I cannot shift or click drag to do a lasso select here so I'm going to be each of them individually and then this one here also and then Add to Cart this one I'm gonna move up and what I'm going to do is call this one return to they need like it's slightly smaller font size here like eight let's keep it that way and return the book let's say I'm gonna make this one now I need like a shopping cart here this one make sure X the x position here it's still 0.05 so I need a shopping cart here that shows the item being selected and I can be selected so on so I'm gonna do is I can do that with two DUI or I can do with three DUI so let's see if I have like if I have a simple panel that I created in sketch it just looks like a thousand by thousand white panel I'm just gonna drag it and drop it in we have the composer so I'm gonna resize it send a very simple and useful to vote shortcut is the pressing the F key and shift left to go from doing an object of hearing the scene I'm just gonna do it make a new 20 percent 15 percent 15 percent now this is where I'm gonna shopping-cart a little bit snapping is kind of keeping it place I'm going to turn off the snap and this will show the shopping cart with the book added and then I'm going to need a checkout button here so I'm gonna steal that them from bring it seemed and see and we basically the same location based a little bit not years I have to reposition it almost there we go and still a little bit this way and I'm gonna call this one check out now what I need is to add the information for that book in here so I could have done that using the same program but I didn't like using sketch or I can do it using text inside the prototype here which is easier to do anyway so I'm gonna do text here actually since I have that text already sewed here some way with this number yeah I'm just going to copy it paste it here black text maybe the font size will be slightly smaller eight and then I'm going to say this will say shopping cart nice thing you can insert multi multi-line text so we don't need to copy and paste that text all the time to create different lines left align it shopping cart and skip - a book's title which is the design of everyday things and you don't need the slapping anymore actually slows down both the workflow and a machine isn't moving things designed everyday things let's say skip another line and old version was selected position that text here so this this is a simple shopping cart for now I'm just going to say I'm going to say this is how it looks like when when I click on Add to Cart now has the prices and the button to add car to the image and then I need to transition to cart when I press on that cart here and then back to book this one to main scene when I click on back to book so all I need now is to create those transitions to do that I'm going to go to behaviors and I'm gonna create just a new behavior custom behavior and I'm gonna have a tap when I tap on not this one when I tap on Add to Cart I'm going to transition she seemed and change the call and see that it goes to court cool so I'm gonna go to the scenes here and do something similar for this one so I actually am the way lazy we'll just go down here and copy this go here if you're paste it and then choose yeah now the trouble is as you can see because it's beta I thought I could get away with just selecting one one object here and would dis elect the previous one but still selecting from the previous scene which I can't really access I'm gonna delete this and I'm gonna be inserted again that's what I get for being lazy and that's so like checkout or actually return to book it's done I'm gonna go see main so now I can actually go and test it here before I can test it on the phone because now I have some interaction so I'm gonna press play and if I add to cart it goes to that book to that page if I return to book it goes to 3s page so I can actually test the tabs inside we have to compose it before exporting it to the device if you're using reality Composer on iOS you can do that actually without having to export anything but I haven't been able to get my hands on the bits for iOS yet I'm hoping soon I'm gonna create a video about that next but for now I know this working I'm gonna export it and find out how it looks on the iPad now you now I need to animate those transitions smoothly so the first one is to make those buttons slide out and start slide up so to do that I'm going to actually just both these guys together Manji move this one with them too so image got selected by mistake these guys text to command G and then I'm gonna go to the behaviors here I'm gonna create another custom behavior I'm gonna call this startup and I'm gonna move this fossil execute first note that it matters because it's a different different trigger but if you have different behaviors with the same trigger they get executed in the top-down order here so the trigger I'm gonna do scene start and for that I need these buttons to be all underneath that image and they start to also be here so I'm gonna do that before I actually animate this I'm gonna slide this one down I missed it start yet so I'm gonna ungroup select everything again and then group and I'm gonna slide it and hide it and then I'm going to do the same for that's why I leave the animation to the end because impacts the final look the the locations of all these buttons and objects so I'm going to group these guys to go to and just gonna slide them below here and then slide these two objects falls below all right so everything is below this image and I want on scene start you move multiple objects to do that and actually have to go below here a little bit of rotational magic here using the shift and click so I can get to the back of that image and now I have these things I can manipulate so now I'm gonna move first I'm going to the stars up so with this selected I'm just going to click done and instead of moving them here by nineteen I'm gonna move them by 5 so it's let's try to move on with the axis more accurately so it aligned with the top of that image okay cool so they move to the top here so that's the first one let's preview perfect and now I'm going to do something similar here for it so like these guys make sure it's just one object selected here because this is a group and double check that the choice is correct here because that's okay that's much better and then I can move a little bit this way and then I mean sequence and then if I play the entire sequence ooh it's a little bug here so let me fix this one so when I modified this behavior modified that one for some reason gonna also zero this out and I'm gonna make it slide up okay let's see that looks like you slide first and then this slide left okay perfect and then I'm gonna head on for Dawn's image same thing going to choose let's say instead done and I'm going to move it right here and then finally I'm gonna check this one and then I'm gonna check everything up left left then we out it's right but this is an inverted one and then finally this one I'm going to also do this and move it all the way here now this takes about four seconds to pop which is very slow so after I'm done with this I'm going to change everything here to my favorite animation duration which is 300 milliseconds 0.3 seconds which is the agreed-upon expert opinion about how long animations your animation should be okay this looks better so now I'm going to revert back to how this looks here and there's more orientation and see how things look cool so now if I play this perfect now let's see how it looks on device you so as the scene transitions out I want to hide all the controls again and I want to go to the Add to Cart so I'm gonna start adding to this behavior here and add new sequence I'm gonna move to because I'm going to move one object at a time right now so I'm going to add this behavior this should execute before everything here all the animations should execute before changing scenes so I can reorder them that way I'm gonna go again to the back of my book cover and I'm going to select the story's done and I want to be exactly where they are that's why it shows move to not move by because move by I have to find out how like what's the distance here move to it's like again easy just this is like the original location for it when I moved down here so this will move down at see also point 13 seconds and if I press play it's not gonna do anything but if I press play here they should seem and I can click on this button this goes down and the transitions to magazine so so far looking good I just need to do the same for the other stuff so I'm gonna add another move to put here and effective object is this group actually the best thing to do is actually to do it in reverse order from last one so Add to Cart will go in first and then the rest of them but I can be on that later so now the effect objects are here I'm just gonna put them back approximately where the this is a prototype so it doesn't really need to be super accurate you're just testing the the idea not the production stuff so I got here and try again click here so this one still has what a bug here so the effect object is here I think this bug needs to be fixed and reality composer hopefully by the lease and if I play here okay perfect and changes to point three and then I'm going to do the same for this one move scale to moved here and then three seconds back behind the image and then finally mr. Norman hide you behind the cover so 0.3 and approximately now if I play this goes up and it's a little bit get back here for some reason if I click on this let's try that again it's messed up okay let's try again better cool okay perfect so it plays well it's just because it probably moved the scene as it was playing that's seem to play back so what I want to do here is to actually change the order a little bit so I want this guy to move back first and then so this would be the first one to move back and then this yeah that's my dog stretching his neck and doing the Jim lease on his collar and this one would be next actually Don Norman would be next so this one here and then the stars would be last so let's see that order here okay let's just one more time let me name it to this moon I'm just gonna name it to back this is not back I'm gonna put the start up here and this is one scene start I'm gonna you can move everything behind the image here a little bit here so I can select text in the panel and group them together go back behind the image move everything move this one back to the checkout button also here and then I'm going to create an action sequence that pops moves all three you know so first one actually the first one wouldn't beat up would be caught itself this one a little bit like this and let's play it favorite point three duration and then you can add another one same thing for check out this I'm assuming if the bug is still there and this would also see oh no it works cool okay so the last one would be also location two for the back button done and I'm going to look at the top here so let's play that sequence cool probably didn't add the 0.3 seconds here that's right slower I mean three and let's preview that sequence now if I if I'm doing a sequence on startup that repeats I will do the loop button and if I click this it will be looping forever but I don't want that so now on startup this comes from behind and I want when I go back is to go back again so I'm going to do the same like I did last time choose the object so the first one that came back is this one I think you're gonna move all three at once see that's possible let's select all three done for some reason it's not no it doesn't work correctly we'll just do it one at a time like we did it with that previous sequence so with two three choose caught object first to exact location let's make sure it's already popping like behind now it's perfect okay and then move it here is the first sequence and then the second sequence would be that button here the second object and then the final object would be the back button three three I'm gonna choose this button done approximately this way and if all goes well cause my fingers and Frank this one is slow ooh that's a mess okay let's see what went wrong here let's see the back here so something happened like there's a bug that made this work like jump instead of go back so it's put it back once again using beta or any beta bits so I'm not really not hitting Apple for this they've done a tremendous job in this fullest tool in such a short period okay let's try again so the button is still going round a little bit let's fix that okay now this goes back here and this goes back here and third time is a charm perfect so now everything is done if I stop this bring the scene back to its correct orientation hide this and play let's go to a main scene here stop here so play back to card back awesome let's see how it looks on the iOS device now you and as you can see all the transitions animations everything works as expected and that took less than one hour in reality composer writing zero lines of code if you like to see more videos and tutorials in the future click the link in the video description below and subscribe to Van tops newsletter I'll see you next one

Channel: amir khella

Views: 16,947

Keywords: augmented reality, ar, arkit, ios, reality composer

Id: bq0Q4cnx7xY

Length: 42min 46sec (2566 seconds)

Published: Mon Aug 19 2019