- Get link
- X
- Other Apps
Love2d Web with Solana SDK connect Phantom wallet - Part 1
I'm interested in all game engine / framework, i want to be a part of this on my way, so once i'm hooked with Solana, i want to share about how to connect Phantom Wallet as Login and disconnect as Logout also buy any items in game with SOL. This thread may be too long, i will separated into 2 chapters, first part to validate your setup is corrected as ever, no need to change or re-setup or re-config once turn-off your computer and turn it love2d game to web game.
Part 2 will journey into an implementation also action and behaviour Love2d with Love.js, if you have or enjoy your current lib that working similar below required setup, go on your strength and review which part you can adopt or applied as you need, the rest of all is wallet integration and interaction.
Required (*download, setup & install follow their instructions)
Windows 11
Node.js [download]
Love2d v11.5 [download] *32-bit / 64-bit installer
Love.js for Love2d v11.5 [download] *master zip file
love-with-js [download] *main zip file
dkjson [download] *master zip file
Visual Studio Code [download]
Love2d Made Easy Extension *install from visual studio code (Recommend)
Phantom Wallet desktop version [download] **beware fake Phantom App
Http-server [download] *simple local server, easy and enough for testing.
Optional (Required for testing only)
Kenny ui-pack [download] *for button UI image
Microsoft Edge [download] *or other browser that support Phantom Wallet browser extension.
Setup Phantom App [for testing only]
Download Phantom Wallet app and install from previous section. After that open and login in with your password. **if no account you can follow this instruction to create new wallet.
After login, you need to click on Avatar, then choose account and then click on Settings > Developer Settings, turn on Testnet mode and select Solana Devnet mode.
If your settings were corrected, you should see notice on your Phantom App liked this. "You are currently in Testnet Mode",
Get free SOL for testing
If your account not having SOL, you cannot pay for anything because any transaction required gas fee. Open this url to request an Airdrop , then copy your public address and paste here, select SOL amount you need then click Confirm Airdrop.
If it's successful, you'll see a message on the bottom-right of screen.
Then take a look SOL in your Phantom Wallet, here your SOL ready for testing. **I recommended to create 2 wallet accounts for testing transfer one to another account.
Create love2d "Hello, World."
Create new folder named "love2d-hello-world", then launch Visual Studio Code, go to File > Open Folder..., browse to "love2d-hello-world" and select folder. Then choose "New File..." type "main.lua" and click "Create New File (main.lua)" and save into folder "love2d-hello-world".
Write down this code or just copy paste into your main.lua file.
function love.draw()
love.graphics.print("Hello, World", 400, 300)
end
And click an icon Love [*2.] (if you don't have it, you can install from required Love2d Made Easy Extension) you should see black screen with white text "Hello World". Now your code is work fine without an error.
Package love2d "Hello, World."
Right-click on "main.lua" file and choose Compress to... > ZIP File, you will receive a new "main.zip" file.
Just rename "main.zip" to "main.love", then double-click on "main.love" your game should be running black screen with white text "Hello World" same as in Visual Studio Code previously.
Port Love2d game to Web game
download and extract Love.js for Love2d v11.5 [download] *master zip file, your extracted file should be like this below image.
On windows, type search filed "cmd" and choose "command prompt" app then go to your extract love.js-master folder. for me, i move love.js-master to root path before type "cd love.js-master", hit Enter.
then type "npm install" and wait until it finished. you should see "node_modules" appear in love.js-master folder.
copy your game "main.love" and paste in love.js-master like below image.
from cmd type "node index.js main.love output_folder --title "Love2d Web Game" --compatibility" and hit Enter. You should receive output_folder and all files like below image. Now your love2d game ready to be publish to any web game portal.
Test your love2d web game on localhost
now, we need to move into "output_folder", from cmd type "cd output_folder" and hit Enter, then type "http-server" and hit Enter, you should see your cmd screen like below image. Your localhost already running on output_folder.
go to your browser and type "http://127.0.0.1:8080" then hit Enter, let see what you've got?
now your love2d game already web game!!
...You can stop here. if you want only porting your love2d game to web game...
Prepare love2d game for integration Solana SDK
Close tab web game and press ctrl-c on cmd to quit localhost, head back to folder love2d-hello-world create a new folder name "assets" beside main.lua and copy button image from kenny-ui pack
I pick up green image and renamed to "btn_connect.png", red image renamed to "btn_disconnect.png" and yellow image and renamed to "btn_buy_item.png"
Now you should have 3 buttons in assets folder. Then back to main.lua on Visual Studio Code, remove all hello world code, typing or copy and paste below code to main.lua.
main.lua as a main scene, we need green for connect wallet but without wallet, just press button and change to game scene.
Click on green button, your scene should be change to game scene as expected below.
For yellow button, it's not functional at this time, red button pressed should act like a logout/disconnect and back to main scene. Now your game main flow should be ready step next for integration.
local gameScene = require("game")
local currentScene = "main"
local btConnect = {}
function love.load()
if currentScene == "main" then
btConnect = {
Image = love.graphics.newImage("assets/btn_connect.png"),
x = 0,
y = 0
}
btConnect.x = love.graphics.getWidth() / 2 - btConnect.Image:getWidth() / 2
btConnect.y = love.graphics.getHeight() / 2 - btConnect.Image:getHeight() / 2
end
end
function love.draw()
if currentScene == "main" then
love.graphics.draw(btConnect.Image, btConnect.x, btConnect.y)
elseif currentScene == "game" then
gameScene.draw()
end
end
function love.update(dt)
if currentScene == "game" then
gameScene.update(dt)
end
end
function love.mousepressed(x, y, button)
if currentScene == "main" then
if button == 1 and
x >= btConnect.x and x < btConnect.y + btConnect.Image:getWidth() and
y >= btConnect.y and y < btConnect.y + btConnect.Image:getHeight() then
currentScene = "game"
gameScene.load()
end
elseif currentScene == "game" then
local result = gameScene.mousepressed(x, y, button)
if result == "main" then
currentScene = "main"
end
end
end
Create new file "game.lua", then typing or copy and paste below code to game.lua, don't forget to save. For game scene we need label show "Potion x 0" as start without buy anything, yellow button top-left for buy potion and red button bottom-right for disconnect wallet but without connected wallet, just press and go back to main scene.
local game = {}
local btDisconnect = {}
local btBuyItem = {}
local total_potion = 0
function game.load()
btDisconnect = {
Image = love.graphics.newImage("assets/btn_disconnect.png"),
x = 0,
y = 0
}
btDisconnect.x = love.graphics.getWidth() - btDisconnect.Image:getWidth() - 20
btDisconnect.y = love.graphics.getHeight() - btDisconnect.Image:getHeight() - 20
btBuyItem = {
Image = love.graphics.newImage("assets/btn_buy_item.png"),
x = 0,
y = 0
}
btBuyItem.x = 50
btBuyItem.y = btBuyItem.Image:getHeight() + 50
end
function game.draw()
love.graphics.print("Potion x " .. total_potion, 50, 50)
love.graphics.draw(btDisconnect.Image, btDisconnect.x, btDisconnect.y)
love.graphics.draw(btBuyItem.Image, btBuyItem.x, btBuyItem.y)
end
function game.update(dt)
end
function game.mousepressed(x, y, button)
if button == 1 and
x >= btDisconnect.x and x < btDisconnect.y + btDisconnect.Image:getWidth() and
y >= btDisconnect.y and y < btDisconnect.y + btDisconnect.Image:getHeight() then
return "main"
end
end
return game
Focus on tab "main.lua", click on the love icon top-right of Visual Studio Code, let see what you've got.
Click on green button, your scene should be change to game scene as expected below.
For yellow button, it's not functional at this time, red button pressed should act like a logout/disconnect and back to main scene. Now your game main flow should be ready step next for integration.
