PlayBASIC LIVE : Saving a New Project ( IDE BASICS ) 2018-04-14This video takes the new playbasic programmer through a couple of examples that demo how to save a project and create folder using the PlayBASIC IDE (Source code editor) -
1) In example one we write th classic Hello World example and then show how to save it as a project to the desktop
2) In the second example we take this further by adding some sprite media to the project manually then demo how you might load the sprites and display them.
hello welcome to another
our video today will be doing sort of
one of the fundamental things about
setting up PV to make a game I will be
opening the IDE saving our projects and
copying some media to that project and
then loading it so a little bit to get
through bear with me but we will will
endeavor to get through it together
so first of all let's open up now play
basic I'm using a what revision this is
but it's not got a few different
revisions but you all look pretty much
the same as this
well me yeah when we open the IDE the
blo basic idea be the code editing
environment if all defaults and we'll
open up a project for us that's empty so
we could just type some code in here you
know probably well and sorry about the
terrible example wait Kate you'd have
fun to run it and we have code up or
running press ok should end back to the
IDE
now that's fine if you just want to mess
around quickly and try something out but
sooner or later you're going to want to
create your own projects rather the load
other people's existing work okay so if
we want to decide this as a project that
we can reload some other other time we
need to go up to file I'm down to save
as and it's opened into full screen for
some reason now what I'll do today is
all at the moment its open I've been to
another project I was working on before
but this time we'll go to desktop and
here is the project name
it's down the down the bottom here and
it defaults to project 1
but we'll call this hell hello world the
project I will project
yeah if I save that the files there'll
be two files and watch it a couple of
our other files saved to your desktop
all spread over your desktop yeah
what you should do is create a folder
okay
create a folder called hello will
project
whoops shall add time by now hit enter
yeah walk into that folder now we'll
save our project into this location so
it made a folder now PB will save our
project file the source code and some
stuff to do with the icons and things
like that they can be associated with
your project into that folder so there's
gonna be a little bit confusing
initially the author name here hasn't
been set because obviously in the
settings here it doesn't mean yeah so
this all be yeah oh you know
I'm just would care okay so that project
is there saved if I minimize this and we
look on the desktop there should be a
folder there is it's a folder called
hello world project which we created we
enter that folder we've got three
different files we've got hello world
project EBP and we've got a hello world
product PPR and main now the main file
is actually the source code the PPP
project which is an acronym for play
basic project file that is actually the
project file can also your it's the well
it's the project file yes which it
contains a bunch of settings about your
project mostly and this is the code go
to the IDE let's say let's close the IDE
close this this project so we can just
reload it by going back to reload and
I'm here which is often what I tend to
do actually all depends on whether
you've got associations set up I have it
on this computer obviously so you can
just drag and drop the file to the IDE
as well no silly windows there you go
and and once that PBP project file
that's the one there's all the
information about this project so your
product you your product might have
multiple source files associated with it
yeah that's we go up here to the project
menu
going to manage project we can add we
can add an existing file source code
file or we could make a new file yeah
we'll just call this one my include my
include file and here showing us the
order in which that the files will be
compiled or pieced together when they're
compiled I want my include file first
and I want my main second so that's all
fine hit OK at the top here it out right
we've got our main so this code here and
there include so I might make over here
you might have a collection of functions
that you use a lot or just something
that it's commonplace it but you don't
really want them mixed up in your main
program so we could we could make it
function you know print read
message so this will just print whatever
we sent it but we might change the ink
color so what Ward well I wouldn't
normally deal with it this kind of its
kind of retained so I always get the old
ink color old ink ask for the ink color
then I would set the ink color that I
wanted here our GPA will make it a
bright red to our print and then we'll
reset the ink to what it was initially
so it looks okay in this like should
compile but just test that yeah
everything compiled and that band fine
might go up and give it a quick save now
yeah follow the back here on the desktop
I'm sorry we're bouncing around
everywhere we now have our include file
and it has a backup as well
every time we include sorry every time
we save we have at least two backups
so our project now contains six files
bro simple hello will program just
closed that fall and go back to play by
Singh I just grabbed that go back to
mine so it print hello well and we put a
print here oh sorry
print read we're calling this function
make it a big long line of characters
let's say if I have to run there we have
it hmm so we've include files like
managed through the IDE like this
they compile from left to right so the
ones on the left over here might be hard
to see I'm sorry her when we hit build
our let's paste into the MA the the file
source code and then the next file is
appended to that it's all bundled
together and send like a viola look upon
just compiles one big chunk of source
source code rather than African double
stitch for files that might require
pre-processing by something else like
the idea in this case okay that's our
very first project so let's do it again
this one will have some meteor and it
will make it loading you mean just
something like that so close that
project and it's not on scratch so
restart play basic we didn't have to do
that just till first seho example it's
time I know I've had some sprites before
these sprite and files here there's a
free night it's very cool isn't it
just occurred to me I didn't didn't keep
the URL my quite sure who made these now
but they've got cool away evasion couple
of different types and imagines some I
might wait some code that loads
animation displays on-screen who knows
but for now we need to set up a project
so go back to play basic might step hi
my author name J probably else looks
pretty good
most I products tend to have a bit of a
a blurb at the top so when I open them
up I actually know what the hell I'm
looking at when you write so many things
over such a long time actually it can be
a bit confusing you know say my game my
game demo be one I care okay it's our
source code it's kind of nothing at this
point we haven't saved anything let's go
up to file and to save as and at the
moment it's it's sitting inside our
previous projects we don't want to save
it there and we want to go up a level
and I like I'll save it to desktop again
so I'll make a folder on the desktop
we'll call this I don't know what we
call it what do you think we should call
it will call it down game project
example that'll do I made the folder but
now we have to go inside the folder and
save file name here to something more
descriptive so nice night game you know
he era all the animals outside
was it not game sprite example she
always I could type in this keyboard
there we go
looks okay that'll do us hit enter and
that will save the project to the
desktop so we hear over the desktop here
and we can see our folders made and
inside we do have a pv source code and
our project file for this project
now what I would normally do is I would
actually make a folder in here but no we
call it G of X which is just short for
graphics by the way hmm
and then we might go into it for how go
sprites yeah let's just copy that across
it's got more files in there than what
we actually need we'll all be there's
the PNG files okay so we're gonna
project files our source code our media
files are in that one place as well and
they look at different names and so
forth it's all f2 load those names
manually okay I just go back to play
basic now that media is kind of set up
and ready to go I can save any time just
with ctrl ctrl that's just like you know
notepad and those kind of projects so to
get the image into memory all we do is
we use the command load image F or tell
it where this file is and the farm will
be relative to where the source code is
saved and this is why I would say the
save their files inside the project so
all the material was actually it's
actually it's actually in one flies what
the hell was that cold okay
it's free not big
sorry I should have known that so it's
inside the graphics file though it's
inside a folder called free nights and
then inside that is a father called PNG
and inside that is hopefully L sprites
you have open the wrong one ever yes I
have terrific mm-hmm I wish the mouse
had moved it there we go free night pay
and J I just love that far away attack
one describe the name yo don't pay NJ ah
okay so we've got the farm I'm now we
need a slot to light this thing into
it's all cool I'll bet I'd be lazy and
use image 1 now if I just do a quick
courtesy save hithere52 run we didn't
get any errors and if the file name is
wrong and I'll just prove this to you
right now put some chick garbage in
there we'll get a runtime error like
that it's telling us it tried to load
some graphics and could not find it it's
the wrong line number which is very
inappropriate but
so the code did compile and run and
execute correctly but we didn't do
anything with the image so how do you
know well if it's loaded quickly or not
so mode the previous image enters into
image slot one so we use it here well
draw it x and y 200 200 can we want draw
it transparent and destroy it all flat
so all of the maths color will be
displayed I'm pretty sure these images
here have alpha channel so wife to
probably fiddle around with this in a
second but let us get on screen now
withdrawn the image the screen call sink
call white key still be there save and
oh there we go it's on screen but the
character the sprite is massive I didn't
realize it was so much we can change the
products default window size let's go up
to project settings and the screen over
here 800 yeah let's go bit bigger than
that about 960 by 700 you know it's a
better size this should be set to 32 yet
even or in windowed mode you know K
again I like to do I like to save a lot
actually up that sort of person right
yes screen is ytp but we are actually on
screen so we have loaded an image we've
drawn this thing to screen and we've
synched we're sitting there waiting for
something else to do
so that's why all that all the rest to
do for like Singapore own project but
let's kick this on a little bit further
we'll just check what kind of
transparency this image actually has
that that will have an impact on how we
load the image that's why I want to
check so clear the screen upfront to a
bright blue we run it okay we can see
the sprite the area here all this area
here that's how at the transparent area
if you're going to use this in a
production in your actual ending your
actual game you want to make sure that
all this Daddy areas cut out it's just
gonna cost you performance like crazy
but for now we won't worry about it
I'll say this to true so we'll draw a
transparent well yeah okay so we neither
like this image as an a FX image we'll
see if it even loads now there's a
version of load image called load a FX
image the rest the code doesn't change
yeah we have it where on screen so we're
up and right okay so good at
transparency working the animation
itself I don't know what having friends
with anime show anything let's see how
much homework on what's in this ice
we're letting out a tax sequence looks
like there's ten files over there a
kolbe attack so what we would do well
what we could do is add a loop for loop
equals 1 to 10 we can load these into
image slights will be a little bit more
considered so let's say that slot 100 we
were alone air frames into slot 100 to
110
so I might need to do there is actually
chop that off I'll be I'll start loading
at 101 want it just like you're saying
yeah so I had like this mice that looks
ugly but we'll get our designer impact
so now we have to dynamically create the
file names or Jews or we're two quotes
in there remove that one don't we make
two strings put a plus two pluses and
here we use the string oops and loop
that's a Lotus our sequence into memory
and then we'll below into image slight
one hundred two hundred and ten between
hundred and hundred and tangent good so
if we try and draw this image one though
that will fail and I'll just prove that
to you
boom didn't work that first image now is
actually one hundred and ten sorry
one hundred I should say let's try that
we've got something in back to normal
cool so we've loaded our images it's
probably taking a little bit time they
probably bigger files and what you might
expect let's make a loop to display the
frames we could do something similar we
could just go for loop equals 100 this
time this is the actual frame maybe the
image in memory we're gonna be using to
110 so the program will run ten times I
think we might have to we will have to
actually add some extra logic to this
but so it's all there for the time being
well draw the frames will draw the
current frame at this position so the
animation should play out
might move up the screen a bit though
was a bit low before so we're drawing
our frame calling stink but we also need
to clear off the previous frame soldiers
inside the Louvre after a run there you
probably won't see much interesting
it'll just kind of run through the
animation too quickly and it did like a
110 so we waited nine frames and the
last frame is going to be sorry ten
frames from 100 to 110 that means that
frame 100 is the first frame at frame
109 as the last room that's 10 frames
yeah just run against they've got no
errors cool but of course we need to
slow that down so I'll just be a bit
cheesy here and I'll add I'll just tell
people to set the frame rate to
something
what about 10 frames per second so we
should see all the frames being rendered
yeah that's better there you go that's a
very very entry-level way of saying up
their own project right the room meeting
you're into it just say that again so if
I close the project down close Peavy
down close all these windows up here
this is our project that we just made
I'll put this on the on the forum with
the video so you can come and tell look
at it yourself
the folder just contains our night game
sprite example it also has the code with
it if you look about in no pages there's
just text there's nothing special about
it
and if graphics follow has our free
night
animations which has got a lot of a lot
more frames there fee to tinker around
with maybe do something with him who
knows anyway that's how I normally iced
all my projects and set them up it is a
little bit daunting the first time you
do it and yeah I don't beep don't be
frightened of it it you probably will
make a few mistakes the first time you
do it so actually give it a go get used
to how the quirks of the play basic idea
and before you start your big UB
projects or anything just to make sure
you understand how it likes to do its
work and that you don't don't lose
anything in the process because it is it
is possible for you to save over an
existing project if you're not careful
so just remember that anyway thanks for
watching and I hope that was abuse
--fill have used to somebody and we'll
get to some other time bye
Visit PlayBASIC.com (http://playbasic.com)
Example #1: Attached bellow are the two examples created in this video.
Example #2:
Attached bellow are the two examples created in this video.
Note: The sprite set shown here are from here Download Free Knight Sprites (https://www.gameart2d.com/the-knight-free-sprites.html)
hey kev
i always learn something new from your videos. with this one i learnt that you can drag a project file into the ide. handy.
the free graphics website is good. it has lots of freebies.
maybe use some of these to show a menu with buttons demo, and use some for a basic platformer for a later demo?
i think these graphics are vector based, so they are scalable in a paint program, without losing quality.
stevmjon