web browser

I've released the other games in itch.io to be playable in as many platforms as possible. This also gives people an easy way to test the game before downloading it. So, the stacker wasn't going to be different. This entry is about that step.

Why?
Because making an EXE means only Windows user can test it. However, making it html/browser playable lets any person with a computer or with a phone play it.

What is different? And what relation has with the blog?
The HTML zip is not runnable within browsers without extra programs. This helps to avoid people expecting to do so out of a lack of knowledge. The relation with the blog is like I explained before, for people to try before installing (besides exporting it for other system, deletes the preset of the
vita for said project, and you have to add it again. So, another heads up from this blog to you)

With that out of the way, let's start with the process. There are a few ways to do it:
* The official documentation is this https://docs.godotengine.org/en/3.5/tutorials/export/exporting_for_web.html
But after googling a bit, you can find three easier methods:

- Through Godot's web editor https://editor.godotengine.org/releases/latest/

- Through a program working as web server, example with PHP here: https://www.youtube.com/watch?v=foXI2uJMEhQ

- Through itch.io (it requires you to make an account, but as I said before, I happen to have one from the previous ones). I'm going to use this as an aid: https://www.youtube.com/watch?v=6DVJIlYr7QE

> I am going to put here a few pictures, and bullet points, about using godot to make the game playable throught itch.io website. Take this as a way to get visibility for the game if you need a greedy reason.

First, we need to export the game, obviously:

Be sure to go to "resources", and select "Export all resources in the project"

Be sure to go to "Script", and select "Compiled Bytecode (Faster Loading)".

Be sure to press the "Export all" button when you're ready, you don't want the folder missing important files of your game.

Now that you have a folder with your files, it should look like this:

Be sure to name your main HTML as "index.html" or it won't run.

After that, zip the whole folder, and go to itch.io for the upload (don't forget to do it with the "playable in browser" option).

Don't forget to update your project's "viewport dimensions" (with the vita's resolution, in our case).

Let the orientation as "default" (In our case being 'rotated' from source it could mess up with some automatic rotation in phones and tablets).

I've also selected "full screen" "scroll bars" and "mobile friendly" to avoid people from being able to play in some screens sizes.

The next step should be released it, but you'll find the "Public" option grayed out. Don't worry, you must save it first as
a draft. You can test it works, and/or directly go back and select public and save after that.

Boom! It's done! https://bunkai.itch.io/stacker-for-vita-browser

Next entry is about this stacker game, and how it was done, with code and everything. Stay tuned!

Back to the Basics

 After more than two years, I've come back here, with the original idea still as hot as the first day. However, the approach of this entry is to create a new generic sample, so it can be checked in any system quickly.

Doing this, we can have something (similar to an SDL hello world) to test, without any Vita or SDK requirement. Besides, we can use it as a base for everything else.

First, we'll need to create our main.c file
(check https://lazyfoo.net/tutorials/SDL/01_hello_SDL/index2.php for more info)

----------------------------------------------------------

Basics on building the vpk

For this example, we are using the "hello_world". We explained this sample on our previous entry.

Before compiling, we have to edit the CmakeLists.txt with project data. Editing this file is the "hardest part" of building the vpk, and it will have updates every time we need to add a file to the project.

Some parts to keep in mind are:


## Define project parameters here
# Name of the project

 project(hello_world)

# This line adds Vita helper macros, must go after project definition in order
# to build Vita specific artifacts (self/vpk).

 include("${VITASDK}/share/vita.cmake" REQUIRED)

## Configuration options for this app
# Display name (under bubble in LiveArea)

 set(VITA_APP_NAME "Hello World")

# Unique ID must be exactly 9 characters. Recommended: XXXXYYYYY where X =
# unique string of developer and Y = a unique number for this app

 set(VITA_TITLEID  "VSDK00007")

# Optional version string to show in LiveArea's more info screen

 set(VITA_VERSION  "01.00")


# Add any additional include paths here
include_directories(
  ../common # This is for debugScreenPrintf(), you shouldn't need it in your projects
)

## Build and link
# Add all the files needed to compile here
add_executable(${PROJECT_NAME}
  src/main.c
  ../common/debugScreen.c
)


## Create Vita files
vita_create_self(${PROJECT_NAME}.self ${PROJECT_NAME})
# The FILE directive lets you add additional files to the VPK, the syntax is
# FILE src_path dst_path_in_vpk. In this case, we add the LiveArea paths.
vita_create_vpk(${PROJECT_NAME}.vpk ${VITA_TITLEID} ${PROJECT_NAME}.self
  VERSION ${VITA_VERSION}
  NAME ${VITA_APP_NAME}
  FILE sce_sys/icon0.png sce_sys/icon0.png
  FILE sce_sys/livearea/contents/bg.png sce_sys/livearea/contents/bg.png
  FILE sce_sys/livearea/contents/startup.png sce_sys/livearea/contents/startup.png
  FILE sce_sys/livearea/contents/template.xml sce_sys/livearea/contents/template.xml
)

---


Now to the compiling, we are going to follow the instructions on the readme file, and type the commands in the terminal. [This part is fairly easy, to be honest]

"Use the following command to build every sample:"

mkdir build && cd build # create a building directory 
cmake .. # copy and create the files we'll need to compile in the build directory
make # actually build the archives and the vpk 

After this we will have our files in the "build" folder, every file is explained clearly in the CmakeLists.txt and because of that, there is no need to copy the same here.

----

Some screenshots of the process